@charset "utf-8";


/* 초기화 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
*,*::before,*::after {box-sizing:border-box;}
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,abbr,article,aside,command,details,figcaption,figure,
footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time {margin:0; padding:0;}
body,input,textarea,select,button {font-family:'NotoSansKR', 'Malgun Gothic', '맑은 고딕', 'OpenSans', sans-serif; font-size:100%; letter-spacing:-0.02em; font-weight:normal; line-height:1.5; color:#555; word-break:break-all;}
table,th,h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}
article,aside,footer,header,hgroup,nav,section,figure,figcaption {display:block;}
legend,caption {position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip:rect(0, 0, 0, 0);}
img,fieldset {margin:0; padding:0; border:0;}
img,input,select,textarea {vertical-align:middle;}
ul,ol,li,dl {list-style:none;}
address,caption,cite,code,dfn,em,i {font-style:normal;}
label {display:inline-block; margin:2px 4px;}

/* 링크-버튼 관련 */
a {color:var(--fontcolor1); text-decoration:none; transition:all 0.3s;}
a:hover, a:active {text-decoration:none; color:var(--maincolor);}
a,button,*[onclick] {cursor:pointer;}
button {margin:0; padding:0; border:none; font-family:inherit; font-size:1em; background:transparent; cursor:pointer; transition:all 0.3s;}
button:active, button:focus {outline:none;}

/* 테이블 관련 */
table {border-collapse:collapse; border-spacing:0;}
table * {font-size:15px; font-weight:400;}
table a {text-decoration:underline; color:#1a62a8;}
table a:hover {text-decoration:underline; color:#1a62a8;}
table a[class*="bbs"] {font-weight:normal; text-decoration:none;}
table input[type*="text"][readonly=readonly] {font-size:14px; width:auto; height:auto; padding:0; resize:none; border:0; background:transparent;} /* input폼 readonly */
table input[type*="text"][class*="hasDatepicker"][readonly=readonly] {font-size:14px; width:100%; height:40px; padding:0 8px; border:1px solid #ccc;} /* 달력 readonly */

/* form태그  */
input:focus {border-color:transparent; outline:2px dashed var(--maincolor);}
select:focus {border-color:transparent; outline:2px dashed var(--maincolor);}
input,select,textarea {vertical-align:middle; border-radius:3px; border:1px solid #ccc; background:var(--white);}
input[type=text], input[type=password], input[type=number] {width:100%; height:36px; font-size:14px; padding:0 8px; apperance:none; -webkit-appearance:none; -moz-appearance:none;}
select {
	position:relative; width:100%; height:36px; font-size:14px; padding:0 20px 0 8px;
	background:url('/static_root/images/common/select_down.svg') right 2px center no-repeat, var(--white); background-size:16px;
	apperance:none; -webkit-appearance:none; -moz-appearance:none;
}
select::-ms-expand, input[type=text]::-ms-expand, input[type=password]::-ms-expand {display:none; appearance:none;}
textarea {font-size:14px; width:100%; height:100px; padding:8px; color:var(--fontcolor2);}

/* 라디오-체크박스 */
input[type="radio"] {
	width:16px; height:16px; margin:-2px 4px 0 0; border-radius:50%; border:2px solid #ccc; outline:none; 
	background:var(--white); appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
input[type="radio"]::-ms-expand {display:none; appearance:none;}
input[type="radio"]::before {content:""; display:block; width:38%; height:38%; margin:31% auto; border-radius:50%;}
input[type="radio"]:disabled {border:2px solid #ccc; background:#ccc;}
input[type="radio"]:disabled::before {background:var(--white);}
input[type="radio"]:checked {border:2px solid var(--maincolor); background:var(--maincolor);}
input[type="radio"]:checked::before {background:var(--white);}

input[type="checkbox"] {
	position:relative; width:16px; height:16px; margin:-2px 4px 0 0; border:2px solid #ccc; outline:none; 
	background:var(--white); appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
input[type="checkbox"]::-ms-expand {display:none; appearance:none;}
input[type="checkbox"]::before {content:""; display:block; position:absolute; left:4.5px; top:0.5px; width:5px; height:10px; border:solid #ccc; border-width:0 3px 3px 0; transform:rotate(45deg);}
input[type="checkbox"]:disabled {border:2px solid #ccc; background:#ccc;}
input[type="checkbox"]:disabled::before {border-color:#9a9a9a;}
input[type="checkbox"]:checked {border:2px solid var(--maincolor); background:var(--white);}
input[type="checkbox"]:checked::before {border-color:var(--maincolor);}

/* placeholder */
::-webkit-input-placeholder {color:#9e9e9e;} /* 크롬 4–56 */
:-moz-placeholder {color:#9e9e9e; opacity:1;} /* 파이어폭스 4–18 */
::-moz-placeholder {color:#9e9e9e; opacity:1;} /* 파이어폭스 19–50 */
:-ms-input-placeholder {color:#9e9e9e;} /* 인터넷 익스플로러 10+ */
::placeholder {color:#9e9e9e; opacity:1;} /* 파이어폭스 51+, 크롬 57+ */

/* ellipsis :: 말줄임설정 */
.ellipsis {
	/* table 사용할 경우 "table-layout:fixed;" 설정 필요 */
	white-space:nowrap;
	overflow:hidden; /* "overflow" value must be different from "visible" */
	text-overflow:ellipsis; /* IE, Safari */
	-o-text-overflow:ellipsis; /* Opera under 10.7 */
	-ms-text-overflow:ellipsis;
	-moz-binding:url('ellipsis.xml#ellipsis');
	display:block;
}
.strCut {float:left; max-width:-moz-calc(100% - 20px); max-width:-webkit-calc(100% - 20x); max-width:calc(100% - 20px);}


/* 웹접근성 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* skip to navigation */
.skip_navi a {position:absolute; top:-999999px; left:-999999px;}
.skip_navi a:focus {display:block; top:0; left:0; z-index:999999; width:100%; height:40px; font-size:14px; line-height:40px; color:#eee; text-align:center; background:#222; outline-offset:-3px;}

/* hidden text */
.sr_only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; white-space: nowrap; border:0; overflow:hidden; clip:rect(0,0,0,0);}

/* float 레이아웃 깨짐 방지 */
.clearfix::before, .clearfix::after {content:""; display:block; line-height:0;}
.clearfix::after {clear:both;}
