html {width: 100%;height: 100%;min-height: 100%;overflow: hidden;font-size: 16px;}
body {font-size:16px; font-family:"Noto Sans KR"; color:#666; position: relative;height: 100%; min-height:100%;font-weight: 400;overflow-x: hidden; box-sizing: border-box;}
.clear:after {content:''; display:block; clear:both;}
label{outline: none;}

/*color*/
a{color:#666; box-sizing:border-box;}
a:focus, a:hover{text-decoration: none;}
.blue {color:#276cad;}
.yellow {color:#f5b415;}
.black {color:#333;}
.red {color:#dd3413;}

/*스크롤바디자인*/
::-webkit-scrollbar {
    width: 13px;
}
::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 0 5px 5px 0;
}
::-webkit-scrollbar-thumb {
  border-radius: 100px;
    width: 10px;
  background-color:#d7d7d7;
  box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
}






/*selectBox 컨텐츠 셀렉트 박스*/
.selectBox{position:relative; height:51px; line-height: 50px; border-radius: 5px; border:1px solid #d7d7d7; cursor: pointer; display: inline-block; vertical-align: bottom; text-align: left; }
.selectBox:after{content:'\f0d7'; font-weight: 900; font-size: 16px; color:#888; font-family: "Font Awesome 6 Pro"; position:absolute; top:0; right:0; transform: translateY(-50%); z-index: -1; width: 0;height: 0; margin-right: 30px;}
.historyList.selectBox:after{z-index: 0;  }

.selectBox .label {display:flex; align-items: center; width: inherit; height:inherit;  background: transparent; cursor: pointer; color:#666; width: 100%; font-size: 16px;font-weight: 400; padding:0 40px 0 20px;}

.selectBox .optionList{position:absolute; top:51px; left:-1px; width:calc(100% + 2px); background:#fff; color:#666; border-radius: 5px; overflow: hidden;  border:1px solid #d7d7d7; box-sizing: border-box; display:none; z-index: 999;}

.selectBox.active .optionList {display:block; max-height:130px; overflow-y: auto;}
.selectBox.active .optionList::-webkit-scrollbar{width: 11px;}
.selectBox.active .optionList::-webkit-scrollbar-track{background: #eee;}
.selectBox.active .optionList::-webkit-scrollbar-thumb{border-radius: 100px; width: 10px; background: #c0c0c0; box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);}
.selectBox .optionItem { border-bottom: 1px solid #d7d7d7; padding: 0 20px; }

.selectBox .optionItem:hover {background: #276cad; color: #fff;}

.selectBox .optionItem:last-child {
    border-bottom: 0 none;}



.sel-w120px{width: 120px;}
.sel-w160px{width: 160px;}
.sel-w180px{width: 180px;}
.sel-w200px{width: 200px;}
.sel-w240px{width: 240px;}
.sel-w360px{width: 360px;}
.sel-w70pro{width: 70%;}
.sel-w100pro{width: 100%;}


/*input 공통사항*/
input{height:50px; padding:0 20px; border:1px solid #d7d7d7; border-radius: 5px;}
input[type="checkbox"]{width:16px; height:16px; border:1px solid #d7d7d7; border-radius: 3px; appearance:none; cursor: pointer;}
input[type="checkbox"]:checked{background:#276cad; border:1px solid #276cad; position:relative;}
input[type="checkbox"]:checked:before{content:'\f00c'; display:block; font-size: 11px; color:#fff; font-weight: 900; font-family:"Font Awesome 6 Pro"; position:absolute; top:45%; left:50%; transform: translate(-50%, -50%);}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="radio"]{width:16px; height:16px; border:1px solid #d7d7d7; appearance:none; cursor: pointer; border-radius: 50%;}
input[type="radio"]:checked{border:1px solid #276cad; position:relative; }
input[type="radio"]:checked:before{content:''; display:block; width: 8px;height: 8px; border-radius: 50%; background:#276cad; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
input::placeholder{color:#aaa;}
textarea::placeholder{color:#aaa;}
input::-ms-input-placeholder{color:#aaa;}
input::-ms-input-placeholder{color:#aaa;}

.input-b-none{border:none; padding: 0;}

.input-h40px{height: 40px;}
.input-h45px{height: 45px;}
.input-w120px{width: 120px;}
.input-w160px{width: 160px;}
.input-w200px{width: 200px;}
.input-w240px{width: 240px;}
.input-w360px{width: 360px;}
.input-w480px{width: 480px;}
.input-w50pro{width: 50%;}
.input-w70pro{width: 70%;}
.input-w100pro{width: 100%;}
.input-w20vw{width: 20vw;}



/*버튼 공통사항*/
.pageBtn-w100pro{width:100%; }
.pageBtn-w50pro{width:calc(50% - 5px);}

.page-btn{height:50px; display:flex; align-items: center; justify-content: center; border-radius: 5px;}
.page-btn-wrap{width:100%; display:flex; align-items: center; justify-content: center;}
.page-btn-wrap2{width:100%; display:flex; align-items: center; justify-content: space-between;}

page-btn-wrap3{width: 100%; display:flex; align-items: center; justify-content: center;}


.btn-w80px{width: 80px;}
.btn-w100px{width: 100px;}
.btn-w120px{width: 120px;}
.btn-w140px{width: 140px;}
.btn-w160px{width: 160px;}
.btn-w200px{width: 200px;}
.btn-w300px{width: 300px;}
.btn-w100pro{width: 100%;}


/*table 공통사항*/
.page-table1, .page-table2{width:100%; table-layout: fixed; border-top:2px solid #276cad;}
.page-table1 th{width: 15%; border-right:1px solid #d7d7d7; border-bottom:1px solid  #d7d7d7; padding:0 20px; vertical-align: middle; display:table-cell; height: 50px; background: #f0f5f9; color:#333; font-weight: 500;}
.page-table1 td{width: 85%;border-bottom:1px solid  #d7d7d7; padding:10px 20px; line-height: 1.5; vertical-align: middle; display:table-cell;}

.page-table2 th{background: #f0f5f9; height:50px; vertical-align: middle; display:table-cell; color:#333; font-weight: 500; border-right:1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; padding:10px 20px;}
.page-table2 td{height:50px; vertical-align: middle; display:table-cell; text-align: center; border-right:1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; padding:10px 20px; line-height: 1.3;}
.page-table2 th:last-child, .page-table2 td:last-child{border-right: 0;}

.table-hover tbody tr td{cursor: pointer;}
.table-hover tbody tr:hover td, .table-hover tbody tr.actived td{background:#f7f9fc; }

/*margin*/
.ml03{margin-left: 3px;}
.pc-mr05{margin-right:5px;}
.pc-mr10{margin-right:10px;}
.pc-mr20{margin-right:20px;}
.pc-mr30{margin-right:30px;}
.pc-ml10{margin-left:10px;}
.pc-ml20{margin-left:20px;}
.pc-mt30{margin-top:30px;}
.pc-mt60{margin-top:60px;}
.mlr5px{margin-left: 5px; margin-right: 5px;}
.pc-mt10{margin-top: 10px;}
.mlr10px{margin-left: 10px; margin-right: 10px;}
.btn-mt30{margin-top: 30px;}
.btn-mt80{margin-top: 80px;}