/* input */
textarea{border: 1px solid #dfe2ed; padding: 0 12px; border-radius: 5px; resize: none; font-weight: 500; font-size: 14px;}
input{color:var(--blackColor);}

/* 기본 인풋 */
input[type=text],
input[type=file],
input[type=password],
input[type=email],
input[type=number],
input[type=search],
input[type=date],
input[type=time]{border-bottom: 1px solid #DDDDDD; padding: 8px 0; height: 40px; font-weight: 500; font-size: 14px;}

textarea:focus,
input[type=text]:focus,
input[type=file]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=date]:focus,
input[type=time]:focus{border-bottom: 1px solid var(--subColor); }

/* textarea:disabled,
input[type=text]:disabled,
input[type=file]:disabled,
input[type=password]:disabled,
input[type=email]:disabled,
input[type=number]:disabled,
input[type=search]:disabled,
input[type=date]:disabled,
input[type=time]:disabled{border-bottom: 1px solid #dfe2ed; background: #edf0f9;} */

/* select box */
.select_box{border-bottom: 1px solid #DDDDDD; position:relative; display:inline-block;}
.select_box > select{width:100%; padding: 8px 0; height: 40px; font-weight: 500; font-size: 16px; z-index: 1; position:relative;}
.select_box:after{content: "\e942"; font-family: 'xeicon'; position:absolute; top:50%; right:0px; font-size:2rem; width:2rem; text-align: center; transform:translateY(-50%); color:var(--iconColor);}
.select_box:has(select:hover){border-bottom: 1px solid var(--subColor);}
.select_box:has(select:disabled){border-bottom: 1px solid #dfe2ed; background-color: #edf0f9;}
.select_box:has(select:disabled)::after{color:#dfe2ed;}

/* checkbox, radio*/
.checkbox, .radio{display:inline-block; width: auto !important;}

.checkbox > input{display:none;}
.checkbox > label{display:flex !important; align-items: center;}
.checkbox > label > .styledBox{position:relative; width:20px; height: 20px; border: 1px solid #949CA3;  border-radius: 2px; display:inline-block;}
/* .checkbox > label > .styledBox:after{ color:#949CA3} */
.checkbox > label > .styledBox + span{margin-left:8px; font-weight: 400; font-size: 16px; color:var(--blackColor);}
.checkbox > input[type=checkbox]:checked + label > .styledBox{background-color: var(--mainColor);}
.checkbox > input[type=checkbox]:checked + label > .styledBox:after{color:#fff; content: "\e929"; font-family:"xeicon"; position:absolute; font-size: 2rem; top:50%; left:50%; transform: translate(-50%, -50%);}
.checkbox + .checkbox{margin-left:10px}

.radio > input{display:none;}
.radio > label{display:flex !important; align-items: center;}
.radio > label > .styledBox{position:relative; width:20px; height: 20px; border: 1px solid #dfe2ed;  border-radius: 50%; display:inline-block;}
.radio > label > .styledBox + span{margin-left:10px; font-weight: 400; font-size: 16px; color:var(--blackColor);}
.radio > input[type=radio]:checked + label > .styledBox{background-color: var(--mainColor);}
.radio > input[type=radio]:checked + label > .styledBox:after{content: ""; position:absolute; background-color:#fff; width:50%; height:50%; border-radius: 50%; top:50%; left:50%; transform: translate(-50%, -50%); color:#fff}
.radio + .radio{margin-left:15px;}

/* 버튼형 라디오 */
.tabRadio{display: flex;}
.tabRadio label{width:50%; display: block; height: 40px; line-height: 40px; padding: 0 20px; background: #dfe2ed; color: #bbbec9; font-size: 15px; text-align: center; cursor: pointer;}
.tabRadio input[type=radio] + label{margin-right: 0;}
.tabRadio input[type=radio]:checked + label{background: #fff; color: var(--mainColor); font-weight: 600;}
.tabRadio input[type=radio]{display: none;}

.tabRadio.dap3 label{width:calc(100% / 3);}

/* 버튼형 체크박스 */
.tabChkbox{display: flex; margin-bottom: 20px;}
.tabChkbox label{display: block; height: 36px; line-height: 36px; padding: 0 20px; background: #dfe2ed; color: #bbbec9; font-size: 14px; border: 1px solid #dfe2ed; border-left: 0; text-align: center;}
.tabChkbox input[type=checkbox] + label{margin-right: 0;}
.tabChkbox input[type=checkbox]:checked + label{background: #fff; color: var(--subColor);}
.tabChkbox input[type=checkbox]{display: none;}
.tabChkbox label:first-of-type{border-radius: 4px 0 0 4px; border-left: 1px solid #dfe2ed;}
.tabChkbox label:last-of-type{border-radius: 0 4px 4px 0;}

/* 검색, 달력 */
.schInputWrap{position: relative; display: inline-block;}
.schInputWrap input[type=search]{padding-right:30px}
.schInputWrap button{font-size:0px; cursor: pointer;}
.schInputWrap button:after{ position:absolute; right:10px; top:50%; transform:translateY(-50%); content: "\e97a"; font-family: 'xeicon'; display:inline-block; font-size:1.5rem;}
.schInputWrap input:focus + button:after{color:var(--subColor);}

.dayWrap{line-height: 40px;}
.datepicker{position: relative; display: inline-block; }
.datepicker > i::after{position:absolute; content: "\e9a0"; font-family: "xeicon"; font-size:1.5rem; top:50%; right:10px; transform:translateY(-50%);}
.datepicker > input:focus + i:after{color:var(--subColor);}

/* file */
.fileBox input[type=file]{display: none;}
.fileBox input[type=text]{width: 300px;}
.fileBox label{border-radius: 4px; text-align: center; display: inline-block; background: #989ca9; color: #fff; padding: 0 20px; height: 40px; line-height: 40px;}
.fileBox label:hover{background: #bbbec9; box-shadow: 0 0 10px rgba(51, 51, 51, 0.2);}
.fileBox label:disabled{background: #dfe2ed; color: #fff;}
.fileBox label:disabled:hover{box-shadow: none;}

/* 버튼 */
button.disabled{
    cursor:default;
    background: #e5e5e5 !important;
    color: #bbb !important;
    border-color: #e5e5e5 !important;
}

.btn{border-radius: 99px; text-align: center; display: inline-block; position: relative; font-weight: 700; }
.btn.sizeSSS{padding: 3px 10px; font-weight: 600; font-size: 14px; border-radius: 4px; letter-spacing: -0.015em;}
.btn.sizeSS{padding: 7px 14px; font-weight: 600; font-size: 15px; border-radius: 4px; letter-spacing: -0.015em;}
.btn.sizeS{padding: 12px; height: 48px; font-size: 1.6rem;  font-weight: 700;  border-radius: 4px; letter-spacing: -0.015em;}
.btn.sizeM{padding: 0 20px; height: 52px; line-height: 52px; font-size: 1.8rem;}

.btn i{vertical-align: baseline;}
.btn.sizeSS i{margin-right:6px; font-size: 14px; }
.btn.sizeS i{margin-right:6px; font-size: 12px; }
.btn.sizeM i{margin-right:8px; font-size: 14px; }
.btn.sizeL i{margin-right:8px; font-size: 16px; }

.btn.sizePop1{width: 100%;}
.btn.sizePop2{width: 50%;}
.btn.sizePop3{width: 33.33%;}

.btn.bgMain{background: var(--mainColor); color: #fff;}
.btn.bgMain:disabled{background: #edf0f9; color: #bbbec8;}
.btn.bgMain:disabled:hover{box-shadow: none;}

.btn.bdMain{background: #fff; color: var(--mainColor); border:1px solid var(--mainColor);}
.btn.bdMain:disabled{background: #dfe2ed; color: #c3c6cf;}

.btn.bdGray{background: #fff; color: #727C83; border:1px solid #727C83;}
.btn.bdGray:disabled{background: #dfe2ed; color: #c3c6cf;}

.btn.bgGreen{background: #328343; color: #fff;}
.btn.bgGreen:hover{background: #38a24e; box-shadow: 0 0 10px rgba(39, 235, 114, 0.2);}
.btn.bgGreen:disabled{background: #edf0f9; color: #bbbec8;}
.btn.bgGreen:disabled:hover{box-shadow: none;}

.btn.bgGray{background: #727C83; color: #fff;}
.btn.bgGray:disabled{background: #dfe2ed; color: #fff;}
.btn.bgGray:disabled:hover{box-shadow: none;}

.btn.delBtn{font-size:0px; width: 48px;}
.btn.delBtn:after{content: "\e96f"; display:inline-block; font-family: "xeicon"; font-size:2.2rem; font-weight: 300; color: var(--iconColor);}

/* toggle버튼 */
.toggleInput {position: relative;}
.toggleInput input {display: none;}
.toggleInput input:checked + label:before {transform: translateY(-50%) translateX(20px);}
.toggleInput label{position: absolute; cursor: pointer; top: 3px; left: 4px; right: 0; bottom: 0; height: 12px; width: 24px; background: #FFF; box-shadow: 0px 0px 4px rgba(0, 86, 137, 0.4); border-radius: 99px;}
.toggleInput label:before {border-radius: 50%; position: absolute; content: ""; height: 16px; width: 16px; left:-4px; top: 50%; transform: translateY(-50%); background: var(--mainColor); transition: all 0.5s;}
.toggleInput input:checked + label{background: var(--subColor);}
.toggleInput input:disabled + label::before{background: #dfe2ed;}
.toggleInput input:disabled + label{background: #f4f6fc;}
.toggleInput span{font-weight: 500; font-size: 1.4rem; display: inline-block; margin-left:40px;}

/* - 페이지 로딩 처리 - */
body.loading:after {font-family:"xeicon"; content: "\ec34"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    position:fixed; top:50%; left:50%; width:50px; height:50px; line-height:50px; font-size:4.4rem; padding:5px; z-index:1000; transform:translate(-50%, -50%);
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background:#fff; color:#2d3845; overflow:hidden; text-align: center;
    animation: spin 1.5s linear infinite;
    will-change: transform, opacity;
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.2);
}

body.loading:before {display:block; position:fixed; background:rgba(0,0,0,0.2); top:0px; left:0px; right:0px; bottom:0px; z-index:999; content:''; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* - @페이지 로딩 처리 - */

/* 페이징 */
.pagingWrap{font-size: 0; display:flex; justify-content: center; align-items: center;}
.pagingWrap a{width: 30px; height: 30px; line-height: 30px;  display: inline-block; font-size: 17px; margin: 0 3px; text-align: center; color: #989ca9;}
.pagingWrap .prev, .pagingWrap .next{display:inline-block; cursor: pointer; margin: 0 3px;}
.pagingWrap .prev:after,
.pagingWrap .next:after{font-family: 'xeicon'; display:inline-block; font-size:25px;}
.pagingWrap .prev:after{content: "\e93c";}
.pagingWrap .next:after{content: "\e93f";}
.pagingWrap a.on{border-radius: 50%; background: var(--mainColor); color: #fff; font-weight: bold;}

/* tableStyle */
.tableWrap{width:100%; overflow-x: auto;}
.tableStyle{width:100%;}
.tableStyle > thead th{background:#8e969c; color:#fff; font-size:16px; padding:10px;}
.tableStyle > thead th + th{border-left:1px solid #fff;}
.tableStyle > tbody td{color:var(--blackColor); font-size:15px; padding:10px; text-align: center; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}

/* tabMenu */
.tabMenuWrap{background:#F7F7F7;}
.tabMenuWrap > .tebMenu{display:flex; justify-content: space-between;}
.tabMenuWrap > .tebMenu > li{text-align: center; width:calc(100% / 5); }
.tabMenuWrap > .tebMenu > li > a{color:var(--textColor); display:block; padding:14px 0; font-size:14px;}
.tabMenuWrap > .tebMenu > li.on{background:#fff;}
.tabMenuWrap > .tebMenu > li.on > a{color:var(--mainColor); font-weight: 600;}


/* datepicker 리뉴얼 20230629 */
.ui-widget-header { border: 0px solid #dddddd; background: #fff; } 

.ui-datepicker-calendar>thead>tr>th { font-size: 14px !important; } 

.ui-datepicker .ui-datepicker-header { position: relative; padding: 10px 0; } 

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active { border: 0px solid #c5c5c5; background-color: transparent; font-weight: normal; color: #454545; text-align: center; } 

.ui-datepicker .ui-datepicker-title { margin: 0 0em; line-height: 16px; text-align: center; font-size: 14px; padding: 0px; font-weight: bold; } 

.ui-datepicker { display: none; background-color: #fff; border-radius: 4px; margin-top: 10px; margin-left: 0px; margin-right: 0px; padding: 20px; padding-bottom: 10px; width: 300px; box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1); } 

.ui-widget.ui-widget-content { border: 1px solid #eee; } 

#datepicker:focus>.ui-datepicker { display: block; } 

.ui-datepicker-prev,
.ui-datepicker-next { cursor: pointer; } 

.ui-datepicker-next { float: right; } 

.ui-state-disabled { cursor: auto; color: hsla(0, 0%, 80%, 1); } 

.ui-datepicker-title { text-align: center; padding: 10px; font-weight: 100; font-size: 20px; } 

.ui-datepicker-calendar { width: 100%; } 

.ui-datepicker-calendar>thead>tr>th { padding: 5px; font-size: 20px; font-weight: 400; } 

.ui-datepicker-calendar>tbody>tr>td>a { color: #000; font-size: 12px !important; font-weight: bold !important; text-decoration: none;}

.ui-datepicker-calendar>tbody>tr>.ui-state-disabled:hover { cursor: auto; background-color: #fff; } 

.ui-datepicker-calendar>tbody>tr>td { border-radius: 100%; width: 44px; height: 30px; cursor: pointer; padding: 5px; font-weight: 100; text-align: center; font-size: 12px; } 

.ui-datepicker-calendar>tbody>tr>td:hover { background-color: transparent; opacity: 0.6; } 

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus { border: 0px solid #cccccc; background-color: transparent; font-weight: normal; color: #2b2b2b; } 

.ui-widget-header .ui-icon { background-image: url('../images/btns.png'); } 

.ui-icon-circle-triangle-e { background-position: -20px 0px; background-size: 36px; } 

.ui-icon-circle-triangle-w { background-position: -0px -0px; background-size: 36px; } 

.ui-datepicker-calendar>tbody>tr>td:first-child a { color: red !important; } 

.ui-datepicker-calendar>tbody>tr>td:last-child a { color: #0099ff !important; } 

.ui-datepicker-calendar>thead>tr>th:first-child { color: red !important; } 

.ui-datepicker-calendar>thead>tr>th:last-child { color: #0099ff !important; } 

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight { border: 0px; background: #f1f1f1; border-radius: 50%; padding:5px 0;} 

.inp { padding: 10px 10px; background-color: #f1f1f1; border-radius: 4px; border: 0px; } 

.inp:focus {outline: none; background-color: #eee;}