@charset "utf-8";

@font-face { font-family: 'notoSansL'; font-style: normal; font-weight: 300; src: url(fonts/notoSans/NotoSansKR-Light.woff2) format('woff2'); }
@font-face { font-family: 'notoSansR'; font-style: normal; font-weight: 400; src: url(fonts/notoSans/NotoSansKR-Regular.woff2) format('woff2'); }
@font-face { font-family: 'notoSansM'; font-style: normal; font-weight: 500; src: url(fonts/notoSans/NotoSansKR-Medium.woff2) format('woff2'); }
@font-face { font-family: 'notoSansB'; font-style: normal; font-weight: 700; src: url(fonts/notoSans/NotoSansKR-Bold.woff2) format('woff2'); }
@font-face {font-family: 'Material Icons'; font-style: normal; font-weight: 400;
    src: url(fonts/icons/MaterialIcons-Regular.eot);/* For IE6-8 */
    src: url(fonts/icons/MaterialIcons-Regular.woff2) format('woff2'),
         url(fonts/icons/MaterialIcons-Regular.woff) format('woff'),
         url(fonts/icons/MaterialIcons-Regular.ttf) format('truetype');
}

* {box-sizing: border-box; -webkit-box-sizing: border-box;user-select: none;}
body { -webkit-touch-callout:none;}
/* 변수사용 */
:root{
    --fontDefultColor : #111;
    --mainColor : #569cb3;
    --subColor : #569cb3;
    --spriteImg : url(images/imgSpritesForm.png);
}

/*기본태그 정의*/
html{font-size: 10px;}
body{background: #f7f7f7;}
body.noScroll{overflow: hidden;}
body, td, select, textarea, input, button {font-size:1.6rem; color:var(--fontDefultColor); line-height: 1.5;  font-family:"notoSansR", "Malgun Gothic", "맑은 고딕" ,helvetica, 'Dotum', "Apple SD Gothic Neo", sans-serif; border: none; outline: none;}
html, body, div, span,  applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, input{
	margin: 0;
	outline: 0;
	border: 0;
	padding: 0;
	vertical-align: top;
	background: transparent;
	word-break: keep-all;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}

/* 리스트의 스타일 제거 */
ol, ul {list-style:none;}

/* 테이블 스타일 초기화 */
table {border-collapse:collapse; border-spacing:0; table-layout: fixed;}

/* hidden 처리 */
caption{width:0;height:0;font-size:0;line-height:0;overflow:hidden;visibility:hidden;}
legend{width:0;height:0;font-size:0;line-height:0;overflow:hidden;visibility:hidden;}


/* 폼태그의 초기화 */
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; }
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=radio]{position:relative; margin-right:3px; width:20px; height: 20px;}
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;}

/* 버튼형 라디오 */ 
.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;}

/* 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: 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;}


textarea,
input[type=text],
input[type=tel],
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: 50px; line-height: 50px; border-radius: 4px;}

textarea:focus,
input[type=text]:focus,
input[type=tel]: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[type=text]:disabled,
input[type=tel]: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: 40px; 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;}