/* 폰트아이콘 */
.fontIcons{}
.fontIcons.google{
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}


/* 폼태그의 초기화 */
input, select, textarea, button{vertical-align: middle; -webkit-appearance: none; appearance: none; color: 3e4047; background: #fff;}
textarea{resize: none; min-height: 80px; width: 100%;}
button {cursor:pointer; background: transparent;}
select{text-overflow: ellipsis;}
input::placeholder,
textarea::placeholder{color: #989ca9;}
input[type=radio],
input[type=checkbox] {cursor:pointer;}
label{cursor:pointer; vertical-align: middle;}
input::-ms-clear,
input::-ms-reveal{
    display:none;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
    display:none;
}

/* a태그 */
a{cursor: pointer; color:var(--fontDefultColor);}
a:link{text-decoration:none; color: inherit;}
a:active{text-decoration:none; color: inherit;}
a:visited{text-decoration:none; color: inherit;}
a:hover{text-decoration:none; color: inherit;}

/* checkbox, radio, input, select */
input[type=checkbox]{position:relative; margin-right:3px; width:20px; height: 20px; border-radius: 3px;}
input[type=checkbox]::before,
input[type=checkbox]::after{ background: var(--spriteImg) }
input[type=checkbox]:before{display:block; content:''; position:absolute; width:20px; height:20px; z-index:2; cursor:pointer; background-position: 0 85px;}
input[type=checkbox]:checked:after{display:block; content:''; position:absolute; width:20px; height:20px; z-index:2;  background-position: 0 120px;}
input[type=checkbox] + label{margin-right: 15px;}
input[type=checkbox]:hover::before{background-position: 0 155px;}


input[type=radio]{position:relative; margin-right:3px; width:20px; height: 20px; border-radius: 10px;}
input[type=radio]::before,
input[type=radio]::after{ background: var(--spriteImg) }
input[type=radio]::before{display:block; content:''; position:absolute;  width:20px; height:20px; cursor:pointer; background-position: -30px 85px;}
input[type=radio]:checked::after{display:block; content:''; position:absolute; width:20px; height:20px; z-index:2; background-position: -30px 120px;}
input[type=radio] + label{margin-right: 15px;}
input[type=radio]:hover::before{background-position: 0 155px;}

/* 버튼형 라디오 */
.tabRadio{display: flex; margin-bottom: 20px;}
.tabRadio 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;}
.tabRadio input[type=radio] + label{margin-right: 0;}
.tabRadio input[type=radio]:checked + label{background: #fff; color: var(--subColor);}
.tabRadio input[type=radio]{display: none;}
.tabRadio label:first-of-type{border-radius: 4px 0 0 4px; border-left: 1px solid #dfe2ed;}
.tabRadio label:last-of-type{border-radius: 0 4px 4px 0;}

/* 버튼형 체크박스 */
.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{ position:absolute; right:10px; top:12px; width:16px; height:16px; background: var(--spriteImg) no-repeat -135px -34px; text-indent: -9999px;}
.schInputWrap input:focus + button{background-position: -135px -64px;}
.dayWrap{line-height: 40px;}
.datepicker{position: relative; display: inline-block; }
.datepicker i{ position:absolute; right:10px; top:12px; width:16px; height:16px; background: var(--spriteImg) no-repeat -93px -34px; text-indent: -9999px;}
.datepicker input{width: 130px; }
.datepicker input:focus + i{background-position: -93px -64px;}
.datepicker > input[readonly] {
    background-color: #fff;
}
.datepicker > input[disabled] {
    background-color: #edf0f9;
}

/* file */
.fileBox{}
.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: 36px; line-height: 36px;}
.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;}


textarea,
input[type=text],
input[type=file],
input[type=password],
input[type=email],
input[type=number],
input[type=search],
input[type=serch],
input[type=date],
input[type=time]{border: 1px solid #dfe2ed; padding: 0 12px; height: 36px; line-height: 36px; border-radius: 4px;}

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=serch]:focus,
input[type=date]:focus,
input[type=time]:focus{border: 1px solid var(--subColor); }

textarea:disabled,
input:read-only,
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=serch]:disabled,
input[type=date]:disabled,
input[type=time]:disabled{border: 1px solid #dfe2ed; background: #edf0f9; }

select{border: 1px solid #dfe2ed; padding: 0 42px 0 12px; height: 36px; border-radius: 4px; background-image: url(../css/images/imgSpritesForm.png); background-repeat: no-repeat; background-position: right -135px top -164px; }
select:focus{border: 1px solid var(--subColor); background-position: right -135px top -190px;}
select:disabled{border: 1px solid #dfe2ed;  background-image: url(../css/images/imgSpritesForm.png); background-color: #edf0f9; }


/* toggle버튼 */
.toggleInput {position: relative; display: inline-block; width:36px; height: 12px; border-radius: 6px; background: #edf0f9;}
.toggleInput input {opacity:0; width:0; height:0;}
.toggleInput input:checked + span:before {transform: translateY(-50%) translateX(20px);}
.toggleInput span{position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #edf0f9; border-radius: 6px;}
.toggleInput span:before {border-radius: 50%; position: absolute; content: ""; height: 20px; width: 20px; left:0px; top: 50%; transform: translateY(-50%); background: #fff; box-shadow: 3px 0 10px rgba(73, 75, 83, 0.3); transition: all 0.5s;}
.toggleInput input:checked + span{background: var(--subColor);}
.toggleInput input:disabled + span::before{background: #dfe2ed;}
.toggleInput input:disabled + span{background: #f4f6fc;}



/* 스크롤디자인 */
::-webkit-scrollbar{ width: 5px; height: 5px;}
::-webkit-scrollbar-thumb{ height: 20%; background-color: #cfcfcf; border-radius: 10px; }
::-webkit-scrollbar-track{ background-color: #f2f2f2; }





/* toggle버튼 */
.toggleInput {position: relative; display: inline-block; width:36px; height: 12px; border-radius: 6px; background: #edf0f9;}
.toggleInput input {opacity:0; width:0; height:0;}
.toggleInput input:checked + span:before {transform: translateY(-50%) translateX(20px);}
.toggleInput span{position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #edf0f9; border-radius: 6px;}
.toggleInput span:before {border-radius: 50%; position: absolute; content: ""; height: 20px; width: 20px; left:0px; top: 50%; transform: translateY(-50%); background: #fff; box-shadow: 3px 0 10px rgba(73, 75, 83, 0.3); transition: all 0.5s;}
.toggleInput input:checked + span{background: var(--subColor);}
.toggleInput input:disabled + span::before{background: #dfe2ed;}
.toggleInput input:disabled + span{background: #f4f6fc;}




/* 페이징 */
.pagingWrap{font-size: 0; display: flex; align-items: center; justify-content: center; }
.pagingWrap a{width: 28px; height: 28px;  display: inline-block; font-size: 16px; margin: 0 3px; text-align: center; color: #989ca9; line-height: 28px;}
.pagingWrap .prev,
.pagingWrap .next{text-indent: -9999px; background: url(../css/images/imgSpritesForm.png) no-repeat;}
.pagingWrap .prev{background-position: -20px -172px;}
.pagingWrap .next{background-position: -20px -195px;}
.pagingWrap a.on{border-radius: 50%; background: var(--subColor); color: #fff; font-weight: bold;}