@charset "UTF-8";
/*********************************************** topBanner ***********************************************/
.topBanner a{display:block; padding:20px 0; background-color: #06306b; background-image: repeating-linear-gradient(127deg, rgba(255,255,255,0.07), rgba(255,255,255,0.07) 1px, transparent 1px, transparent 10px);font-size: 1.8rem; font-family: "ONEMobileTitle";  letter-spacing:0; color:#fff; text-align:center; }
.topBanner a p::before{content:""; display:inline-block; width:22px; height:22px; margin-right:7px; background:url(../images/info_icon.png) no-repeat; vertical-align:middle;}
/*********************************************** tooltip ***********************************************/
.tooltip {position: relative; font-size: 1.5rem;}
.tooltip[data-tooltip]:hover::after {content:attr(data-tooltip); position: absolute; top: 30px; right: 0; background: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); width:304px; padding: 20px; border-radius: 8px; font-family: 'GothicA1-Regular'; white-space: pre-wrap; word-break: break-all; z-index: 10;}
.tooltip::before {content: ""; width:16px; height: 16px; background: url(../images/tooltip.png) no-repeat; display: inline-block; vertical-align: middle;}
/*********************************************** aside ***********************************************/
.resultSec {display: flex; flex-direction: row; padding-top: 50px; padding-bottom: 100px; min-height: calc(100vh - 237px);}
.resultSec aside {width: 370px; height:fit-content; margin-right: 20px; border: 1px solid #D7DADF; padding: 50px 20px; font-size: 1.6rem;}
.resultSec aside h4 {border-bottom: 2px solid #222;}
.resultSec aside .searchCondition {padding: 20px 0; border-bottom: 2px dotted #D7DADF;}
.resultSec aside .searchCondition .asideConTi {font-family: "ONEMobileTitle"; font-size: 1.8rem; padding: 10px; background: #fafafa; border: 1px solid #D7DADF; margin-bottom: 15px; position: relative;}
.resultSec aside .searchCondition .asideConTi .tooltip {position:absolute; z-index:10; right: 10px; top: 50%; transform: translateY(-50%);}
.resultSec aside .searchCondition label,
.resultSec aside .searchCondition label span {color: #555;}
.resultSec aside .searchCondition input[type="text"] {height:40px; border:1px solid #D7DADF; width: 100%; padding: 0 10px; font-size: 1.6rem;}
.resultSec aside .searchCondition .radioBtWrap {display: flex; flex-direction: row;}
.resultSec aside .searchCondition .radioBtWrap li {margin-right:8px; padding-left: 20px; position: relative;}
/* 기존 라디오 버튼 삭제 */
.resultSec aside .searchCondition .radioBtWrap li input[type="radio"] {position: absolute; opacity: 0; height: 0; width: 0;}
/* 버튼 선택 시 변경디자인 */
.resultSec aside .searchCondition .radioBtWrap li input[type="radio"]:checked ~ .customRadio {border: 1px solid #004683;}
.resultSec aside .searchCondition .radioBtWrap li .customRadio {position: absolute; top: 50%; transform: translateY(-50%); left: 0; height: 16px; width: 16px; border-radius: 50%; border: 1px solid #c5c5c5;}
.resultSec aside .searchCondition .radioBtWrap li .customRadio::after {content: "";  position: absolute; display: none; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #004683;}
.resultSec aside .searchCondition .radioBtWrap li input[type="radio"]:checked ~ .customRadio::after {
    display: block;
}
.resultSec aside .searchCondition .searchDetail {position:relative;}
.resultSec aside .searchCondition .searchDetail input[type="text"] {padding: 0 45px 0 10px;}
.resultSec aside .searchCondition .searchDetail button {position:absolute; width:20px; height:20px; background: url(../images/search_sB.png) no-repeat; border-style: none; top:10px; right: 15px; cursor: pointer;}
.resultSec aside .searchCondition .treeMenu {width: 100%; height: 300px; border: 1px solid #D7DADF; overflow-y: auto;}
.resultSec aside .searchCondition .treeMenu::-webkit-scrollbar {width: 6px; height: 6px;}
.resultSec aside .searchCondition .treeMenu::-webkit-scrollbar-thumb  {height: 30%; background: #8C8C8C;}
.resultSec aside .searchCondition .treeMenu::-webkit-scrollbar-track {background: #D7DADF;}
.resultSec aside .searchCondition .conTiSub {font-family: 'GothicA1-Bold'; margin-bottom: 10px;}
.resultSec aside .searchCondition .checkBtWrap {display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 15px;}
.resultSec aside .searchCondition .checkBtWrap li {/*width: 50%;*/ margin: 0 10px 10px 0;}
.resultSec aside .searchCondition .checkBtWrap li input[type="checkbox"] + label {letter-spacing: -2px;}
.resultSec aside .searchCondition .checkBtWrap li input[type="checkbox"] + label::before {margin-right: 5px; left: 0; top: 50%; transform: translateY(-50%);}
.checkBtWrap input[type="checkbox"] {position: absolute; opacity: 0; height: 0; width: 0;}
.checkBtWrap input[type="checkbox"] + label::before {content: ""; width: 16px; height: 16px; background: url(../images/checkboxOff.png); position: relative; display: inline-block;}
.checkBtWrap input[type="checkbox"]:checked + label::before {background: url(../images/checkboxOn.png);}
.checkBtWrap input[type="checkbox"]:disabled + label::before {background: url(../images/checkboxDisabled.png);}
.resultSec aside .searchCondition .frmWrap { width:100%; display: flex; flex-direction: row; align-items: center; margin-top: 5px;}
.resultSec aside .searchCondition .frmWrap dt {width: 85px; flex-shrink: 0;}
.resultSec aside .searchCondition .frmWrap dd {width: calc(100% - 85px);}
.resultSec aside .searchCondition .langefrm {align-items: flex-start;}
.resultSec aside .searchCondition .langefrm label {margin-top: 7px; display: inline-block;}
.resultSec aside .searchCondition .yearfrm  input[type="text"],
.resultSec aside .searchCondition .langefrm input[type="text"] {width: calc((100% - 22px) / 2);}
.resultSec aside .searchCondition .langefrm .multiRange {width: 100%; margin-top:15px; position: relative;}
/* 커스텀lange */
.resultSec aside .searchCondition .langefrm .slider {position: relative; z-index: 1; height: 6px; margin: 0 5%;}
.resultSec aside .searchCondition .langefrm .slider > .track {position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; border-radius: 5px; background: #EDEEF1;}
.resultSec aside .searchCondition .langefrm .slider > .range {position: absolute; z-index: 2; left: 25%; right: 25%; top: 0; bottom: 0; border-radius: 5px; background: #009BAF;}
.resultSec aside .searchCondition .langefrm .slider > .thumb {position: absolute; z-index: 3; width: 18px; height: 18px; border-radius: 50%; background: #004683; border: 2px solid #fff;}
.resultSec aside .searchCondition .langefrm .slider > .thumb.left { left: 25%; transform: translate(-15px, -7px);}
.resultSec aside .searchCondition .langefrm .slider > .thumb.right { right: 25%; transform: translate(15px, -7px);}
.resultSec aside .searchCondition .langefrm input[type="range"] {position: absolute; pointer-events: none; -webkit-appearance: none; appearance: none; z-index: 2; height: 6px; width: 100%; opacity: 0;}
.resultSec aside .searchCondition .langefrm input[type="range"]::-webkit-slider-thumb { pointer-events: all; width: 18px; height: 18px; border-radius: 0; border: 0 none; background-color: red; cursor: pointer; /* appearance를 해야 위의 스타일들을 볼 수 있음 */ -webkit-appearance: none; appearance: none;}
.resultSec aside .searchCondition select {font-size: 1.6rem; border-style: none; margin-left: -4px; color: #555;}
/*********************************************** resultArea ***********************************************/
.resultSec .resultArea {width: calc(100% - 390px);}
.resultSec .resultArea .subTabBox {display: flex; border:1px solid #D7DADF;}
.resultSec .resultArea .subTabBox li {display:table; width:16.66%; text-align: center;  height: 80px; background: #F7F8FA; border-right:1px solid #D7DADF;}
.resultSec .resultArea .subTabBox li:last-child {border-right: 0;}
.resultSec .resultArea .subTabBox li a {display: table-cell; vertical-align: middle; font-size: 1.8rem; font-family: "ONEMobileTitle"; color: #888e97; line-height: 1.4; letter-spacing:0;}
.resultSec .resultArea .subTabBox li a .tooltip {margin-left:5px; text-align:left;}
.resultSec .resultArea .subTabBox li a .tooltip::before {background: url(../images/tooltipG.png) no-repeat; margin-bottom:3px;}
.resultSec .resultArea .subTabBox li a.on .tooltip::before {background: url(../images/tooltipW.png) no-repeat;}
.resultSec .resultArea .subTabBox li a .tooltip[data-tooltip]:hover::after {font-family: 'GothicA1-Regular'; color: #222; top:25px; right:-5px;}
.resultSec .resultArea .subTabBox li a.on {color: #fff; background: linear-gradient(322deg, rgba(0,155,175,1) 0%, rgba(0,95,180,1) 100%);}
.resultSec .resultArea .subTabBox li a .countInfo{display:block; font-size:1.4rem;}
.resultSec .resultArea .resultTxt {padding: 20px; border: 2px solid #D7DADF; position: relative;}
.resultSec .resultArea .resultTxt::before {content: ""; position: absolute; width: 100%; height: 50%; border: 2px solid #009BAF; border-bottom: 0; top: -2px; left: -2px;} 
.resultSec .resultArea .visualizationBox {border: 1px solid #D7DADF; height: 240px;}

/*********************************************** table ***********************************************/
.tableWrap {width: 100%; margin-bottom: 50px;}
.tableWrap:last-of-type {margin-bottom: 0;}
.tableWrap .tableTi {display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 10px;}
.tableWrap .tableTi h6 {padding-left: 25px; position: relative;}
.tableWrap .tableTi h6::before {content: ""; width: 19px; height: 19px; background: url(../images/bullet.png) no-repeat; position:absolute; left: 0; top: 3px;}
.tableWrap .tableTi .tableTiBtn {font-size: 1.5rem; display: inline-block; padding: 6px 15px; color: #fff; background: #004683;}
.tableWrap .tableTi .tableTiBtn.fieldBtn {background: #eee; color:#555;}
.tableWrap .tableTi .tableTiBtn.dgrayBtn {background: #474747; color:#fff;}
.tableWrap .tableTi .tableTiBtn.conBtn {background: #fff; color:#555; box-shadow: 0 0 0 1px #ccc inset;}
.tableWrap .tableTi .tableTiBtn.conBtn i {display:inline-block; width: 18px; height:18px; background: url(../images/infoBtn.svg) no-repeat center; vertical-align: middle; margin-right: 5px;}
.table{font-size:1.4rem;}
.table.table-scroll {width: 100%; overflow-x: auto; margin-bottom: 20px;}
.table.table-scroll table { table-layout: auto;}
.table.table-scroll table th {white-space: nowrap; padding: 12px 40px;}
.table table {width:100%; border-collapse: collapse; border-top: 2px solid #262626;}
.table table tr {border-bottom: 1px solid #D7DADF;}
.table table th,
.table table td {padding:12px; font-size: 1.4rem; text-align: center; border-left: 1px solid #D7DADF;}
.table table th:first-child,
.table table td:first-child {border-left:0;}
.table table th {font-family: "GothicA1-Bold"; background: #fafafa;}
.table table th a {white-space: nowrap;}
.table table th a .sorting-none,
.table table th a .sorting-asc,
.table table th a .sorting-desc {width: 7px; height: 14px; display: inline-block; vertical-align: middle; margin-left: 3px;}
.table table th a .sorting-none {background: url(../images/sortingIcon_n.png) no-repeat;}
.table table th a .sorting-asc {background: url(../images/sortingIcon_t.png) no-repeat;}
.table table th a .sorting-desc {background: url(../images/sortingIcon_b.png) no-repeat;}
.table table td {color: #555; }
.table table td > * {text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}
.table table label {position: relative;}
.table table td select{width:50%}
.table table td .modifyBt {color: #fff; background: #929292; height: 32px; line-height: 32px; border-style: none; width: 70px; cursor: pointer;}
.table table td .state { display: inline-block; width: 70px; padding: 3px 9px;}
.table table td .tableBt {width: 65px; display: inline-block; padding: 3px; border: 1.5px solid #D7DADF; font-family: 'GothicA1-Bold'; font-size: 1.3rem;}
.table table td .tableBt.readBt {background: #F9F9F9; color: #b0b0b0;}
.table table td .tableBt.viewBt {color: #009BAF;}
.table::-webkit-scrollbar {width:6px; height: 6px;}
.table::-webkit-scrollbar-thumb  {width: 30%; background: #8C8C8C;}
.table::-webkit-scrollbar-track {background: #D7DADF;}
.modalSrh{padding:20px;margin-bottom:20px;background:#f9fafb;border:1px solid #d0d1d3;}
.modalSrh .fldWrap{display:flex;gap:20px}
.modalSrh .fldWrap:not(:last-of-type){margin-bottom:5px}
.modalSrh .fldWrap .item{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.modalSrh .fldWrap .item .fldTit{display:inline-block;width:85px;font-weight:600}
.modalSrh .fldWrap .item .fldCon{display:flex;align-items:center;width:calc(100% - 110px)}
.modalSrh .fldWrap .item .fldCon .wave{flex-shrink:0;display:inline-block;width:20px;text-align:center}
.modalSrh .fldWrap .item .fldCon input[type="text"],
.modalSrh .fldWrap .item .fldCon select{width:100%;font-size:15px}
.modalSrh .srhBtnBox{margin-top:20px;padding-top:20px;border-top:1px solid #D7DADF}
.modalSrh .srhBtnBox .fldSrh{display:inline-block;width:10px;margin: 0 auto;padding:10px 20px;background:#004683;color:#fff;font-weight:500}
.modalSrh .srhBtnBox .fldSrh.reset{background:#474747;}


.wj-pivotpanel tr, .wj-pivotpanel td {border:1px solid #e0e0e0 !important;}

#div_efccyinfo_detail .table,
#div_efccyinfo_all_detail .table {overflow: auto; max-height:765px;}

#div_efccyinfo_detail .table table,
#div_efccyinfo_all_detail .table table {width:3000px;}

#div_efccyinfo_detail .table table th,
#div_efccyinfo_all_detail .table table th {word-break: keep-all;}

#div_carboninfo_detail .table,
#div_carboninfo_detail .table {overflow: auto; max-height:765px;}

#div_carboninfo_detail .table table,
#div_carboninfo_detail .table table {width:3000px;}

#div_carboninfo_detail .table table th,
#div_carboninfo_detail .table table th {word-break: keep-all;}

#metabolome_pivotGrid,
#metabolome_forecast_pivotGrid,
#testinfo_pivotGrid,
#carboninfo_pivotGrid {max-height:765px;}
/*********************************************** cart ***********************************************/
.resultSec.myCart {flex-direction: column;}
.resultSec.myCart .tableWrap {margin-bottom: 0px;}
.resultSec.myCart .tableWrap .applicationTable td {text-align: left;}
.resultSec.myCart p.selTotal { color: #555; font-size: 1.5rem; margin-top: 10px;}
.resultSec.myCart .essential {color: rgb(240, 0, 0); position: relative; top: -5px; left: 3px;}
.resultSec.myCart .red {color: rgb(240, 0, 0);}
.resultSec.myCart .formTi {font-size: 1.6rem; font-family: "GothicA1-Bold"; font-weight: 600; margin: 20px 0 10px 0;}
.resultSec.myCart .frmTxtBox {padding:20px; background: #fafafa; border: 1px solid #D7DADF; font-size: 1.5rem;}
.resultSec.myCart .frmTxtBox span {text-indent: 12px; margin-top: 3px;}
.resultSec.myCart .signBox {border: 1px solid #D7DADF; margin-top: -1px; padding: 20px;}
.resultSec.myCart .signBox .applicant {font-family:'GothicA1-Bold';}
.resultSec.myCart .signBox p {font-size: 1.6rem;}
.resultSec.myCart .signBox .signTxtWrap {display: flex; justify-content: space-between;}
.resultSec.myCart .signBox .signTxtWrap .signImg {width: 120px; height: 45px; vertical-align: middle;display: none;}
.resultSec.myCart .signBox .signBtn {display:inline-block;  text-align: center; padding:3px 10px; color: #fff;  font-size: 1.5rem; background: #009BAF; border-radius: 3px;}
/*********************************************** paging ***********************************************/
.pagingWrap {display: flex; flex-direction: row; justify-content: center; margin-top: 20px;}
.pagingWrap li {margin: 0 3px;}
.pagingWrap li a {display: block; font-size: 1.4rem; text-align: center;  width: 20px; height: 30px; line-height: 30px;}
.pagingWrap li.num a.on {color: #009BAF; font-family: 'GothicA1-Bold'; line-height:32px;}
.pagingWrap li.btnPrev2 a {background: url(../images/prev2.png) no-repeat center 12px;}
.pagingWrap li.btnPrev a {background: url(../images/prev.png) no-repeat center 12px;}
.pagingWrap li.btnNext2 a {background: url(../images/next2.png) no-repeat center 12px;}
.pagingWrap li.btnNext a {background: url(../images/next.png) no-repeat center 12px;}

/*********************************************** layer ***********************************************/
.layer { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); display: none; position: fixed; top: 0; left: 0; z-index: 1000;}
.layer .layerContent {width:100%; max-width: 1000px; min-width:1000px; max-height: 90%; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 40px; font-size: 1.6rem; overflow-y: auto;}
.layer .layerContent .closeBt {width: 27px; height: 27px; background: url(../images/closeBt.png) no-repeat; display: block; float: right;}
.layer .layerContent .info {margin-top: 50px;}
.layer .layerContent h5 {margin-bottom: 15px;}
.layer .layerContent h5::before {content: ""; width: 4px; height: 20px; background: linear-gradient(322deg, rgba(0,155,175,1) 0%, rgba(0,95,180,1) 100%); display: inline-block; vertical-align: middle; margin-right: 5px; margin-bottom: 3px;}
.layer .layerContent .infoWrap {border-top: 1px solid #DFDFDF; border-bottom: 1px solid #DFDFDF; padding: 20px 20px 10px 20px; display: flex; flex-wrap: wrap;}
.layer .layerContent .infoWrap {border-bottom: none;}
.layer .layerContent .infoWrap:last-of-type {border-bottom: 1px solid #DFDFDF;}
.layer .layerContent .infoWrap dl {width: 100%; flex-shrink: 0; display: flex; margin-bottom: 20px;}
.layer .layerContent .infoWrap dt {font-family: 'GothicA1-Bold'; margin-right: 10px; width: 240px;}
.layer .layerContent .infoWrap dt::before {content: ""; width: 4px; height: 4px; border-radius: 50%; background: linear-gradient(322deg, rgba(0,155,175,1) 0%, rgba(0,95,180,1) 100%); display: inline-block; vertical-align: middle; margin-right: 5px;}
.layer .layerContent .infoWrap dd {color: #555; width: calc(100% - 240px);}
.layer .layerContent .infoWrap dd .textBox {width: 100%; height: 135px; overflow: auto; background: #fafafa; padding: 20px;}
.layer .layerContent .infoWrap dd .code {display: inline-block;}
.layer .layerContent .infoWrap02 p {margin-bottom:10px;}
.layer .layerContent .infoWrap02 dl {flex-direction:column;}
.layer .layerContent .infoWrap02 dt {padding-bottom:5px;}
.layer .layerContent .infoWrap02 dt,
.layer .layerContent .infoWrap02 dd {width:100%;}
.layer .layerContent .infoWrap02 figcaption {text-align:right;}
.layer .layerContent .infoWrap02 img {width:100%;}
.layer .layerContent .tableScroll::-webkit-scrollbar{height:6px}
.layer .layerContent::-webkit-scrollbar,
.layer .layerContent .textBox::-webkit-scrollbar {width: 6px;}
.layer .layerContent .tableScroll::-webkit-scrollbar-thumb,
.layer .layerContent::-webkit-scrollbar-thumb,
.layer .layerContent .textBox::-webkit-scrollbar-thumb  {height: 30%; background: #8C8C8C;}
.layer .layerContent .tableScroll::-webkit-scrollbar-track,
.layer .layerContent::-webkit-scrollbar-track,
.layer .layerContent .textBox::-webkit-scrollbar-track {background: #D7DADF;}
.layer .layerContent .tableScroll{overflow-x:auto;padding-top:45px;background:url(../images/icons/scroll_icon.svg) no-repeat right 4px;background-size:58px 36px}
.layer .layerContent .tableScroll .scrollbar{height:1px;}
.layer .layerContent .table.scroll{overflow-x:auto;}
.layer .layerContent .table.scroll table{max-width:1800px;table-layout:auto}
.layer01 .layerContent {max-width: 750px; min-width: 750px;}
.layer01 .layerContent .infoWrap {padding:20px;}
.layer01 .layerContent .infoWrap dl {margin-bottom: 0; align-items: center;}
.layer01 .layerContent .infoWrap dt {width: auto; margin-right: 50px;}
.layer01 .layerContent .infoWrap dd { flex-grow: 1;}
.layer01 .layerContent .infoWrap dd input[type="text"] {width: 100%; height: 32px; border-radius: 0; border: 1px solid #D7DADF; padding: 0 5px; color: #555; font-size: 1.6rem;}
.layer01 .layerContent .layerBtn {margin-top:20px;}
.layer01 .layerContent .layerBtn button {border-style: none;}
.layer01 .layerContent .layerBtn .saveBtn {font-size: 1.5rem; display: inline-block; padding: 6px 15px; color: #fff; background: #004683;}
.layer01 .layerContent .layerBtn .delBtn {font-size: 1.5rem; display: inline-block; padding: 6px 15px; color: #fff; background: #555;}
/**********************************************************************************************/
#signatureCanvas {width:100% !important;}
.errorMessage {font-size:1.7rem;}