@charset "utf-8";
/*-------------------------------------------------------------------------------------------------------------
	File : Base.css
	Company : TWS
	CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, background, font/color, align, etc
-------------------------------------------------------------------------------------------------------------*/

*, *:before, *:after {margin:0; padding:0; border:0; font-family:"Noto Sans KR", "Open Sans","Dotum", "Dotumche", "돋움", "돋움체", "Arial"; box-sizing:inherit; -webkit-box-sizing:inherit; -moz-box-sizing:inherit; -o-box-sizing:inherit;}
html {height:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box;}
body {height:100%; font-size:14px; line-height:1.3; color:#333;}
address, article, aside, canvas, details, figure, figcaption, footer, header, menu, nav, section, p {display:block; margin:0; padding:0;}
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:normal;}
img {vertical-align:middle;}
ol, ul, li, dl, dt, dd {list-style:none;}
table {width:100%; border-spacing:0px; border-collapse:collapse;}
th, td {word-break:break-all; font-weight:normal;}
fieldset, iframe {width:100%;}
em, address {font-style:normal;}
button, select, input, label {vertical-align:middle;}
hr {display:none;}
a {text-decoration:none;}
legend {position:absolute; left:-9999em; top:-9999em;}
caption {visibility:hidden; height:0; line-height:0; font-size:0;}
button {cursor:pointer; outline:none;}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(/font/NotoSansKR-Regular.woff) format('woff');
	src: url(/font/NotoSansKR-Regular.woff2) format('woff2');
  }
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/font/NotoSansKR-Medium.woff) format('woff');
	src: url(/font/NotoSansKR-Medium.woff2) format('woff2');
  }
@font-face {
	font-family: 'Noto Sans KR';
	font-style: bold;
	font-weight: 700;
	font-display: swap;
	src: url(/font/NotoSansKR-Bold.woff) format('woff');
	src: url(/font/NotoSansKR-Bold.woff2) format('woff2');
  }
@font-face {
	font-family: 'Noto Sans KR';
	font-style: bold;
	font-weight: 900;
	font-display: swap;
	src: url(/font/NotoSansKR-Black.woff) format('woff');
	src: url(/font/NotoSansKR-Black.woff2) format('woff2');
  }

.overhidden {overflow:hidden;}

/* Scroll */
.overflow-a {overflow:auto;}
.overflow-h {overflow:hidden;}
.overflow-x {overflow-x:scroll;}
.overflow-y {overflow-y:scroll;}

/* IR */
.blind {position:absolute; left:-999px; top:-999px; width:1px; height:1px; overflow:hidden;} /* 링크는 사용불가(IOS초점에러), aria-label="" 사용권장 */
.blind-area {position:absolute; left:0; top:0; right:0; bottom:0; z-index:0; overflow:hidden; color:transparent;} /* 모바일접근성 그룹영역 초점처리(IOS초점 호환성처리) */

/* Align */
.align_l {text-align:left !important;}
.align_c {text-align:center !important;}
.align_r {text-align:right !important;}
.align_j {text-align:justify; -moz-text-align-last:justify; -webkit-text-align-last:justify; text-align-last:justify;}

/* 말줄임 */
.ellipsis {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.multiline {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; height:40px; line-height:40px; -webkit-line-clamp:2; -webkit-box-orient:vertical;} /* 높이값, 줄간격, 라인수는 가이드에서 적용 */

/* 폰트 */
.fontNS, .fontNS > * {font-family:"Noto Sans KR" !important;}

/* 글자 색 */
.fontblue { color: #517cd2 };

/* margin */
.mgt0 {margin-top:0 !important;}
.mgt20 {margin-top:20px !important;}
.mgt40 {margin-top:40px !important;}
/* padding */
.pdt0 {padding-top:0 !important;}

/* 넓이 */
.width50 {width:50px !important;}
.width80 {width:80px !important;}
.width100 {width:100px !important;}
.width200 {width:200px !important;}
.width250 {width:250px !important;}
.width300 {width:300px !important;}
.width400 {width:400px !important;}
.width450 {width:450px !important;}
.width500 {width:500px !important;}
.width80p {width:80% !important;}

/* == Form ============================================================================================================ */

/* btnWrap */
.btnWrap {display:inline-flex; position:relative; margin:0; padding:0; flex-direction:row; flex-wrap:nowrap;}
.btnWrap .btn + .btn {margin-left:6px;}
.btn {position:relative; min-width:50px; margin:0; padding:0; border-radius:4px; font-size:14px; text-align:center; box-sizing:border-box; overflow:hidden; word-break: keep-all;}
button.btn {display:inline-block; background:none;}
a.btn {display:table;}
a.btn span {display:table-cell; text-align:center; vertical-align:middle;}

.btn.btnBigSmall {height:20px; padding:0 10px; margin-left:5px; vertical-align: text-top; min-width:20px;}
.btn.btnSmall {height:28px; padding:0 10px; min-width:60px;}
.btn.btnMid {height:32px; padding:0 10px; min-width:66px;}
.btn.btnLarge {height:40px; padding:0 15px; min-width:80px;}

.btn.dark {background-color:#545b62; border-color:#545b62; color:#FFF;}
.btn.darkgray {background-color:#adb4bc; border-color:#adb4bc; color:#FFF;}
.btn.primery {background-color:#7d9ddd; border-color:#7d9ddd; color:#FFF;}
.btn.red {background-color:#e56767; border-color:#e56767; color:#FFF}
.btn.excel {background-color:#1a7343; color:#FFF;}

.btn.darkLine {background-color:transparent; border:solid #545b62 2px; color:#545b62;}
.btn.darkgrayLine {background-color:transparent; border:solid#adb4bc 2px; color:#545b62;}
.btn.primeryLine {background-color:transparent; border:solid #7d9ddd 2px; color:#517cd2;}
.btn.redLine {background-color:transparent; border:solid #e56767 2px; color:#e56767;}

.btn.btnMid .fa-plus {position:relative; font-size:12px; top:-1px;}
.btn.btnMid .fa-minus {position:relative; font-size:10px; top:3px; margin-right:4px;}
button.btn.btnMid .fa-minus {position:relative; font-size:10px; top:-2px; margin-right:4px;}
button.btn.btnMid .fa-download {position:relative; top:2px;}

/* input */
input[type="text"], input[type="password"], input[type="number"] {display:inline-block; position:relative; height:32px; width:140px; margin:0; padding:0 10px; border:solid #adb4bc 1px; color:#545b62; box-sizing:border-box; border-radius:4px;}
input[type="text"]:disabled, input[type="password"]:disabled {background-color:#edf0f2; border-color:#e1e2e2}
input[type="text"]:read-only, input[type="password"]:read-only {background-color:#edf0f2; border-color:#e1e2e2}
input[type="text"]::placeholder, input[type="password"]::placeholder {color:#999;}
input[type="text"]:disabled::placeholder, input[type="password"]:disabled::placeholder,
input[type="text"]:read-only::placeholder, input[type="password"]:read-only::placeholder {color:#999}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* 화살표 버튼 제거 */
    margin: 0; /* 화살표 버튼과 관련된 마진 제거 */
}

input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:hover::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button; /* 호버 시 화살표 버튼 보이게 */
    opacity: 1; /* 호버 시 화살표 버튼을 더 잘 보이게 함 */
}

/* select */
select {display:inline-block; position:relative; height:32px; margin:0; padding:0 30px 0 10px; border:solid #d0d0d0 1px; border-radius:4px; background-color:#FFF; background:url(../../images/selectArrow.png) no-repeat right 50% #FFF; -moz-appearance: none; -webkit-appearance: none; appearance:none;}
select::-ms-expand {display:none}
select:disabled {background-color:#edf0f2; border-color:#e1e2e2; color:#999}

/* textarea */
textarea {display:block; position:relative; width:100%; min-height:80px; margin:0; padding:15px; border:solid #adb4bc 1px; color:#545b62; box-sizing:border-box; border-radius:4px;}
textarea:read-only, textarea:disabled {background-color:#edf0f2; border-color:#e1e2e2}

/* radioSet */
.radioSet {display:inline-flex; position:relative; margin:0; padding:0; flex-direction:row; justify-content:start; align-items:baseline}
.radioSet label {display:inline-block; position:relative; margin:0; padding:0 0 0 26px; line-height:32px;}
.radioSet label + label {margin-left:20px;}
.radioSet label input[type="radio"] {appearance:none; -webkit-appearance:none; -moz-appearance:none; display:block; position:absolute; left:5px; top:50%; width:1px; height:1px; background-color:transparent; z-index:0;}
.radioSet label input[type="radio"] + span {display:inline-block;}
.radioSet label input[type="radio"] + span::before {content:''; display:block; position:absolute; left:0; top:calc(50% - 10px); width:20px; height:20px; border:solid #adb4bc 1px; border-radius:10px; background-color:#FFF;}
.radioSet label input[type="radio"] + span::after {content:'';}
.radioSet label input[type="radio"]:checked + span::before {border-color:#517cd2;}
.radioSet label input[type="radio"]:checked + span::after {content:''; display:block; position:absolute; left:4px; top:calc(50% - 6px); width:12px; height:12px; background-color:#517cd2; border-radius:7px;}
.radioSet label input[type="radio"]:disabled + span::before {background-color:#edf0f2; border-color:#e1e2e2}
.radioSet label input[type="radio"]:disabled:checked + span::after {content:''; background-color:#adb4bc;}
.radioSet label input[type="radio"]:foucs + span::before {border:dotted #333 1px;}

/** checkboxSet **/
.checkboxSet {display:inline-flex; position:relative; margin:0; padding:0; flex-direction:row; justify-content:start;}
.checkboxSet label {display:inline-block; position:relative; margin:0; padding:0 0 0 26px; line-height:32px;}
.checkboxSet label + label {margin-left:50px;}
.checkboxSet label input[type="checkbox"] + span {display:inline-block;}
.checkboxSet label input[type="checkbox"] {appearance:none; -webkit-appearance:none; -moz-appearance:none; display:block; position:absolute; left:5px; top:50%; width:1px; height:1px; background-color:transparent; z-index:0;}
.checkboxSet label input[type="checkbox"] + span::before {content:''; display:block; position:absolute; left:0; top:calc(50% - 10px); width:20px; height:20px; border:solid #adb4bc 1px; border-radius:3px; background-color:#FFF;}
.checkboxSet label input[type="checkbox"] + span::after {content:'';}
.checkboxSet label input[type="checkbox"]:checked + span::before {border-color:#517cd2;}
.checkboxSet label input[type="checkbox"]:checked + span::after {content:''; display:block; position:absolute; left:4px; top:calc(50% - 6px); width:12px; height:8px; border-bottom:solid #517cd2 2px; border-left:solid #517cd2 2px; transform:rotate(-45deg);}
.checkboxSet label input[type="checkbox"]:disabled + span::before {background-color:#edf0f2; border-color:#e1e2e2}
.checkboxSet label input[type="checkbox"]:disabled:checked + span::after {border-bottom-color:#999; border-left-color:#adb4bc;}

label.checkSingle {display:inline-block; position:relative; margin:0; padding:0;}
label.checkSingle input[type="checkbox"] + span {display:inline-block;}
label.checkSingle input[type="checkbox"] {appearance:none; -webkit-appearance:none; -moz-appearance:none; display:block; position:absolute; left:5px; top:50%; width:1px; height:1px; background-color:transparent; z-index:0;}
label.checkSingle input[type="checkbox"] + span::before {content:''; display:block; position:absolute; left:0; top:calc(50% - 10px); width:20px; height:20px; border:solid #adb4bc 1px; border-radius:3px; background-color:#FFF;}
label.checkSingle input[type="checkbox"] + span::after {content:'';}
label.checkSingle input[type="checkbox"]:checked + span::before {border-color:#517cd2;}
label.checkSingle input[type="checkbox"]:checked + span::after {content:''; display:block; position:absolute; left:4px; top:calc(50% - 6px); width:12px; height:8px; border-bottom:solid #517cd2 2px; border-left:solid #517cd2 2px; transform:rotate(-45deg);}
label.checkSingle input[type="checkbox"]:disabled + span::before {background-color:#edf0f2; border-color:#e1e2e2}
label.checkSingle input[type="checkbox"]:disabled:checked + span::after {border-bottom-color:#999; border-left-color:#adb4bc;}

.yearSelect {display:inline-flex; position:relative; margin:0; padding:0;}
.yearSelect button {display:inline-block; position:absolute; margin:0; padding:0; z-index:10; background-color:transparent}
.yearSelect button span {position:absolute; width:1px; height:1px; font-size:1px; color:transparent; text-indent:-9999px;}
.yearSelect input{padding:0 30px; text-align:center; width:100px;}
.yearSelect input:read-only, .yearSelect input:disabled {background-color:#FFF;}
.yearSelect button.minus {width:30px; height:32px; left:0; top:0;}
.yearSelect button.minus::before {content:''; display:block; position:absolute; left:calc(50% - 6px); width:12px; height:1px; background-color:#545b62}
.yearSelect button.plus {width:30px; height:32px; right:0; top:0;}
.yearSelect button.plus::before {content:''; display:block; position:absolute; left:calc(50% - 6px); width:12px; height:1px; background-color:#545b62}
.yearSelect button.plus::after {content:''; display:block; position:absolute; left:14px; top:calc(50% - 5px); width:1px; height:11px; background-color:#545b62}


/*-------------------------------------------------------------------
    ## DatePicker
-------------------------------------------------------------------*/

/** date-setting **/
.date-setting {display:inline-flex; position:relative; margin:0; padding:0;}
.date-setting.full {width:100%;}
.date-setting .date-pc {display:flex; position:relative; margin:0; padding:0;}
.date-setting .date-pc.full {width:100%;}
.date-setting .date-pc {display:flex; position:relative; margin:0; padding:0;}
.date-setting .date-pc input[type="text"] {display:block; position:relative; box-sizing:content-box; width:110px;}
.date-setting .date-pc input[type="text"]:read-only {background-color:#FFF; color:#545b62;}
.date-setting .date-pc input[type="text"]:disabled, .date-setting .date-pc input[type="text"]:read-only:disabled {background-color:#ececec; color:#999;}
.date-setting .date-pc .input-datepicker {padding-right:30px; box-sizing:border-box;}
.date-setting .date-schedule.full {width:100%;}
.date-setting .date-schedule {display:flex; position:relative; margin:0; padding:0;}
.date-setting .date-schedule input[type="text"] {display:block; position:relative; box-sizing:content-box; width:110px;}
.date-setting .date-schedule input[type="text"]:read-only {background-color:#FFF; color:#545b62;}
.date-setting .date-schedule input[type="text"]:disabled, .date-setting .date-pc input[type="text"]:read-only:disabled {background-color:#ececec; color:#999;}
.date-setting .date-schedule .input-datepicker {padding-right:30px; box-sizing:border-box;}
.date-setting .ui-datepicker-trigger {display:inline-block; position:absolute; right:10px; top:calc(50% - 9px); width:20px; height:20px; opacity:0.6;}
.date-setting span.bar {display:inline-block; position:relative; margin:0; padding:0 12px; line-height:40px; color:#999;}
.date-setting.full .date-pc {width:100%;}
.date-setting.full .date-pc .input-datepicker {width:100%;}
.date-setting.full .datePic input[type="text"] {padding:0;}
.date-setting.full .date-schedule {width:100%;}
.date-setting.full .date-schedule .input-datepicker {width:100%;}
.date-setting.full .date-schedule input[type="text"] {padding:0;}

.date-setting .time-pc {display:flex; position:relative; margin:0; padding:0;}
.date-setting .time-pc input[type="text"] {display:block; position:relative; box-sizing:content-box; width:110px;}
.date-setting .time-pc input[type="text"]:read-only {background-color:#FFF; color:#545b62;}
.date-setting .time-pc input[type="text"]:disabled, .date-setting .date-pc input[type="text"]:read-only:disabled {background-color:#ececec; color:#999;}
.date-setting .time-pc .input-timepicker {padding-right:30px; box-sizing:border-box;}

/* datepicker callender */
.ui-datepicker {display:none; position:absolute; width:296px; height:auto; margin:2px 0 0 0; padding:0; background-color:#FFF; border:solid #e5e5e5 3px; z-index:1; box-sizing:border-box; box-shadow:0 3px 6px 0 rgba(0, 0, 0, 0.1);}
.ui-datepicker .ui-datepicker-header {display:block; position:relative; width:100%; height:50px; margin:0; padding:8px 50px; border-bottom:1px solid #f2f2f2; background-color:#fff; box-sizing:border-box;}
.ui-datepicker-header .ui-corner-all span {position:absolute; font-size:1px; color:transparent; text-indent:-9999px;}
.ui-datepicker-header .ui-datepicker-prev {display:block; position:absolute; left:6px; top:4px; width:40px; height:40px; }
.ui-datepicker-header .ui-datepicker-prev::before {display:block; position:absolute; top:15px; left:20px; width:10px; height:10px; border-top:2px solid #888; border-left:2px solid #888; transform:rotate(-45deg); content:"";}
.ui-datepicker-header .ui-datepicker-next {display:block; position:absolute; right:6px; top:4px; width:40px; height:40px;}
.ui-datepicker-header .ui-datepicker-next::before {display:block; position:absolute; top:15px; right:20px; width:10px; height:10px; border-top:2px solid #888; border-left:2px solid #888; transform:rotate(135deg); content:"";}
.ui-datepicker-header .ui-datepicker-title {display:block; position:relative; width:100%; margin:0; padding:0; font-size:16px; font-weight:bold; color:#666; line-height:33px; text-align:center;}
.ui-datepicker-title .ui-datepicker-year {width:50%; margin-right:4px; padding:0 0 0 10px; font-size:16px; font-weight:700;}
.ui-datepicker-title .ui-datepicker-month {width:50%; margin:0px; padding:0; font-size:16px; font-weight:700;}

.ui-datepicker .ui-datepicker-calendar {position:relative; width:calc(100% - 20px); margin:10px; padding:0; font-size:16px;}
.ui-datepicker .ui-datepicker-other-month.ui-datepicker-unselectable.ui-state-disabled  {color:rgba(0,0,0,0.2);}
.ui-datepicker-calendar thead th, .ui-datepicker-calendar tbody td {height:25px; width:calc(100%/7); margin:0; padding:0; text-align:center; color:#888;}
.ui-datepicker-calendar thead th span {font-weight:400; color:#333;}
.ui-datepicker-calendar a {display:inline-block; position:relative; width:100%; height:100%; line-height:32px; z-index:10; font-size:14px; color:#999;}
.ui-datepicker-calendar a:hover {background-color:#edf0f2; color:#999;}
.ui-datepicker-calendar .ui-datepicker-week-end:last-child a {color:#999;}
.ui-datepicker-calendar .ui-state-active {color:#FFF !important; z-index:10; font-weight:400;}
.ui-datepicker-calendar a.ui-state-highlight {color:#FFF;}
.ui-datepicker-calendar a.ui-state-highlight:hover {color:#517cd2;}
.ui-datepicker-calendar tbody td.ui-datepicker-today a:hover {background-color:#fff;}
.ui-datepicker-calendar .ui-state-highlight::before {content:''; display:block; position:absolute; left:calc(50% - 16px); top:calc(50% - 16px); width:85%; height:100%;background-color:#d3def4; color:#FFF; border:1px solid #d3def4; border-radius:2px; z-index:-1; opacity:1; border-radius:4px;}
.ui-datepicker-calendar .ui-state-active::before {content:''; display:block; position:absolute; left:calc(50% - 16px); top:calc(50% - 16px); width:85%; height:100%; background-color:#517cd2; border-radius:2px; z-index:-1; opacity:1; border-radius:4px;}
.ui-datepicker .ui-datepicker-buttonpane {display:block; position:absolute; right:0; bottom:20px;  height:32px; margin:0; padding:0;}
.ui-datepicker-buttonpane .ui-datepicker-current {display:none;}
.ui-datepicker-buttonpane .ui-datepicker-close {display:none;/*display:inline-block; position:absolute; right:20px; top:0; width:60px; height:32px; border:solid #999 1px; border-radius:16px; font-size:16px; color:#999; background-color:#FFF;*/}


.calendar {
	display: block;
	position: relative;
	box-sizing: content-box;
	width: 110px;margin: 0;
    padding: 0 10px;
    border: solid #adb4bc 1px;
    color: #545b62;
	border-radius: 5px;
}