@charset "utf-8";

* { box-sizing: border-box; }

html { height: 100%; background: #fff; }
body { height: 100%; color: #000; font-style: normal; font-size: 17px; letter-spacing: -0.5px; background: transparent; -webkit-text-size-adjust:  none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; box-sizing: border-box; }
label,
input[type="button"],
input[type="submit"] { cursor: pointer; letter-spacing: -0.5px; }
a { color: #000; }
a, button, p, li  { transition: .2s; }
a i, button i, i, img, span { transition: .1s; }
i { font-style: normal; }

/* align */
.tal { text-align: left; }
.tac { text-align: center; }
.tar { text-align: right; }

/* line-height */
.lh20 { line-height: 20px; }
.lh24 { line-height: 24px; }
.lh26 { line-height: 26px; }
.lh28 { line-height: 28px; }
.lh32 { line-height: 32px; }
.lh36 { line-height: 36px; }
.lh48 { line-height: 48px; }

/* padding */
.pd0 { padding: 0; }
.pd2 { padding: 2px; }
.pd4 { padding: 4px; }
.pd6 { padding: 6px; }
.pd8 { padding: 8px; }
.pd10 { padding: 10px; }
.pd12 { padding: 12px; }
.pd14 { padding: 14px; }
.pd16 { padding: 16px; }
.pd18 { padding: 18px; }
.pd20 { padding: 20px; }
.pd22 { padding: 22px; }
.pd24 { padding: 24px; }
.pd26 { padding: 26px; }
.pd28 { padding: 28px; }
.pd30 { padding: 30px; }
.pd32 { padding: 32px; }
.pd34 { padding: 34px; }
.pd36 { padding: 36px; }
.pd38 { padding: 38px; }
.pd40 { padding: 40px; }

.pt0 { padding-top: 0; }
.pt2 { padding-top: 2px; }
.pt4 { padding-top: 4px; }
.pt6 { padding-top: 6px; }
.pt8 { padding-top: 8px; }
.pt10 { padding-top: 10px; }
.pt12 { padding-top: 12px; }
.pt14 { padding-top: 14px; }
.pt16 { padding-top: 16px; }
.pt18 { padding-top: 18px; }
.pt20 { padding-top: 20px; }
.pt22 { padding-top: 22px; }
.pt24 { padding-top: 24px; }
.pt26 { padding-top: 26px; }
.pt28 { padding-top: 28px; }
.pt30 { padding-top: 30px; }
.pt32 { padding-top: 32px; }
.pt34 { padding-top: 34px; }
.pt36 { padding-top: 36px; }
.pt38 { padding-top: 38px; }
.pt40 { padding-top: 40px; }

.pr0 { padding-right: 0; }
.pr2 { padding-right: 2px; }
.pr4 { padding-right: 4px; }
.pr6 { padding-right: 6px; }
.pr8 { padding-right: 8px; }
.pr10 { padding-right: 10px; }
.pr12 { padding-right: 12px; }
.pr14 { padding-right: 14px; }
.pr16 { padding-right: 16px; }
.pr18 { padding-right: 18px; }
.pr20 { padding-right: 20px; }
.pr22 { padding-right: 22px; }
.pr24 { padding-right: 24px; }
.pr26 { padding-right: 26px; }
.pr28 { padding-right: 28px; }
.pr30 { padding-right: 30px; }
.pr32 { padding-right: 32px; }
.pr34 { padding-right: 34px; }
.pr36 { padding-right: 36px; }
.pr38 { padding-right: 38px; }
.pr40 { padding-right: 40px; }

.pb0 { padding-bottom: 0; }
.pb2 { padding-bottom: 2px; }
.pb4 { padding-bottom: 4px; }
.pb6 { padding-bottom: 6px; }
.pb8 { padding-bottom: 8px; }
.pb10 { padding-bottom: 10px; }
.pb12 { padding-bottom: 12px; }
.pb14 { padding-bottom: 14px; }
.pb16 { padding-bottom: 16px; }
.pb18 { padding-bottom: 18px; }
.pb20 { padding-bottom: 20px; }
.pb22 { padding-bottom: 22px; }
.pb24 { padding-bottom: 24px; }
.pb26 { padding-bottom: 26px; }
.pb28 { padding-bottom: 28px; }
.pb30 { padding-bottom: 30px; }
.pb32 { padding-bottom: 32px; }
.pb34 { padding-bottom: 34px; }
.pb36 { padding-bottom: 36px; }
.pb38 { padding-bottom: 38px; }
.pb40 { padding-bottom: 40px; }

.pl0 { padding-left: 0; }
.pl2 { padding-left: 2px; }
.pl4 { padding-left: 4px; }
.pl6 { padding-left: 6px; }
.pl8 { padding-left: 8px; }
.pl10 { padding-left: 10px; }
.pl12 { padding-left: 12px; }
.pl14 { padding-left: 14px; }
.pl16 { padding-left: 16px; }
.pl18 { padding-left: 18px; }
.pl20 { padding-left: 20px; }
.pl22 { padding-left: 22px; }
.pl24 { padding-left: 24px; }
.pl26 { padding-left: 26px; }
.pl28 { padding-left: 28px; }
.pl30 { padding-left: 30px; }
.pl32 { padding-left: 32px; }
.pl34 { padding-left: 34px; }
.pl36 { padding-left: 36px; }
.pl38 { padding-left: 38px; }
.pl40 { padding-left: 40px; }

/* margin */
.mt0 { margin-top: 0; }
.mt2 { margin-top: 2px; }
.mt4 { margin-top: 4px; }
.mt6 { margin-top: 6px; }
.mt8 { margin-top: 8px; }
.mt10 { margin-top: 10px; }
.mt12 { margin-top: 12px; }
.mt14 { margin-top: 14px; }
.mt16 { margin-top: 16px; }
.mt18 { margin-top: 18px; }
.mt20 { margin-top: 20px; }
.mt22 { margin-top: 22px; }
.mt24 { margin-top: 24px; }
.mt26 { margin-top: 26px; }
.mt28 { margin-top: 28px; }
.mt30 { margin-top: 30px; }
.mt32 { margin-top: 32px; }
.mt34 { margin-top: 34px; }
.mt36 { margin-top: 36px; }
.mt38 { margin-top: 38px; }
.mt40 { margin-top: 40px; }

.mr0 { margin-right: 0; }
.mr2 { margin-right: 2px; }
.mr4 { margin-right: 4px; }
.mr6 { margin-right: 6px; }
.mr8 { margin-right: 8px; }
.mr10 { margin-right: 10px; }
.mr12 { margin-right: 12px; }
.mr14 { margin-right: 14px; }
.mr16 { margin-right: 16px; }
.mr18 { margin-right: 18px; }
.mr20 { margin-right: 20px; }
.mr22 { margin-right: 22px; }
.mr24 { margin-right: 24px; }
.mr26 { margin-right: 26px; }
.mr28 { margin-right: 28px; }
.mr30 { margin-right: 30px; }
.mr32 { margin-right: 32px; }
.mr34 { margin-right: 34px; }
.mr36 { margin-right: 36px; }
.mr38 { margin-right: 38px; }
.mr40 { margin-right: 40px; }

.mb0 { margin-bottom: 0; }
.mb2 { margin-bottom: 2px; }
.mb4 { margin-bottom: 4px; }
.mb6 { margin-bottom: 6px; }
.mb8 { margin-bottom: 8px; }
.mb10 { margin-bottom: 10px; }
.mb12 { margin-bottom: 12px; }
.mb14 { margin-bottom: 14px; }
.mb16 { margin-bottom: 16px; }
.mb18 { margin-bottom: 18px; }
.mb20 { margin-bottom: 20px; }
.mb22 { margin-bottom: 22px; }
.mb24 { margin-bottom: 24px; }
.mb26 { margin-bottom: 26px; }
.mb28 { margin-bottom: 28px; }
.mb30 { margin-bottom: 30px; }
.mb32 { margin-bottom: 32px; }
.mb34 { margin-bottom: 34px; }
.mb36 { margin-bottom: 36px; }
.mb38 { margin-bottom: 38px; }
.mb40 { margin-bottom: 40px; }

.ml0 { margin-left: 0; }
.ml2 { margin-left: 2px; }
.ml4 { margin-left: 4px; }
.ml6 { margin-left: 6px; }
.ml8 { margin-left: 8px; }
.ml10 { margin-left: 10px; }
.ml12 { margin-left: 12px; }
.ml14 { margin-left: 14px; }
.ml16 { margin-left: 16px; }
.ml18 { margin-left: 18px; }
.ml20 { margin-left: 20px; }
.ml22 { margin-left: 22px; }
.ml24 { margin-left: 24px; }
.ml26 { margin-left: 26px; }
.ml28 { margin-left: 28px; }
.ml30 { margin-left: 30px; }
.ml32 { margin-left: 32px; }
.ml34 { margin-left: 34px; }
.ml36 { margin-left: 36px; }
.ml38 { margin-left: 38px; }
.ml40 { margin-left: 40px; }

.nomargin { margin: 0; }

/* width */
.w30 { width: 30px; }
.w50 { width: 50px; }
.w60 { width: 60px; }
.w80 { width: 80px; }
.w100 { width: 100px; }
.w110 { width: 110px; }
.w120 { width: 120px; }
.w130 { width: 130px; }
.w140 { width: 140px; }
.w150 { width: 150px; }
.w170 { width: 170px; }
.w200 { width: 200px; }
.w260 { width: 260px; }
.w300 { width: 300px; }
.w400 { width: 400px; }
.w500 { width: 500px; }

.w2p { width: 2%; }
.w4p { width: 4%; }
.w5p { width: 5%; }
.w6p { width: 6%; }
.w8p { width: 8%; }
.w10p { width: 10%; }
.w11p { width: 11%; }
.w12p { width: 12%; }
.w13p { width: 13%; }
.w14p { width: 14%; }
.w15p { width: 15%; }
.w16p { width: 16%; }
.w17p { width: 17%; }
.w18p { width: 18%; }
.w19p { width: 19%; }
.w20p { width: 20%; }
.w22p { width: 22%; }
.w24p { width: 24%; }
.w26p { width: 26%; }
.w28p { width: 28%; }
.w30p { width: 30%; }
.w32p { width: 32%; }
.w34p { width: 34%; }
.w36p { width: 36%; }
.w38p { width: 38%; }
.w40p { width: 40%; }
.w42p { width: 42%; }
.w44p { width: 44%; }
.w46p { width: 46%; }
.w48p { width: 48%; }
.w50p { width: 50%; }
.w52p { width: 52%; }
.w54p { width: 54%; }
.w56p { width: 56%; }
.w58p { width: 58%; }
.w60p { width: 60%; }
.w62p { width: 62%; }
.w64p { width: 64%; }
.w66p { width: 66%; }
.w68p { width: 68%; }
.w70p { width: 70%; }
.w72p { width: 72%; }
.w74p { width: 74%; }
.w76p { width: 76%; }
.w78p { width: 78%; }
.w80p { width: 80%; }
.w82p { width: 82%; }
.w84p { width: 84%; }
.w86p { width: 86%; }
.w88p { width: 88%; }
.w90p { width: 90%; }
.w92p { width: 92%; }
.w94p { width: 94%; }
.w96p { width: 96%; }
.w98p { width: 98%; }
.w100p { width: 100%; }

/* height */
.h30 { height: 30px; }
.h50 { height: 50px; }
.h60 { height: 60px; }
.h80 { height: 80px; }
.h82 { height: 82px; }
.h83 { height: 83px; }
.h99 { height: 99px; }
.h100 { height: 100px; }
.h110 { height: 110px; }
.h120 { height: 120px; }
.h130 { height: 130px; }
.h140 { height: 140px; }
.h150 { height: 150px; }
.h200 { height: 200px; }
.h300 { height: 300px; }
.h400 { height: 400px; }
.h405 { height: 405px; }
.h500 { height: 500px; }
.h528 { height: 528px; }
.h100p { height: 100%; }

/* display */
.disnone { display: none; }
.disblock { display: block; }
.disinline { display: inline; }
.disinblock { display: inline-block; }

/* flex 기본 */
.flex_inline { display: inline-flex; }

/* justify */
.flex_acenter { display: flex; align-items: center; flex-wrap: wrap; }
.flex_center { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.flex_jcenter { display: flex; justify-content: center; flex-wrap: wrap; }
.flex_between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.flex_end { display: flex; justify-content: flex-end; flex-wrap: wrap; }

/* direction */
.flex_column {  display: flex; flex-wrap: wrap; flex-direction: column; }

/* wrap */
.flex_wrap { display: flex; flex-wrap: wrap; }
.flex_nowrap { display: flex; flex-wrap: nowrap; }

/* grow / shrink */
.flex_1 { flex: 1; }

/* grid 기본 */
.disgrid { display: grid; }

/* 컬럼 */
.disgrid_2 { display: grid; grid-template-columns: repeat(2,1fr); }
.disgrid_3 { display: grid; grid-template-columns: repeat(3,1fr); }
.disgrid_4 { display: grid; grid-template-columns: repeat(4,1fr); }
.disgrid_auto { display: grid; grid-template-columns: auto 1fr; }
.disgrid_auto_auto { display: grid; grid-template-columns: auto auto; }

/* 정렬 */
.grid_center { place-items: center; }
.grid_jcenter { justify-items: center; }
.grid_acenter { align-items: center; }

/* span : 일부 요소만 칸 넓게 */
.grid_col2 { grid-column: span 2; }
.grid_col3 { grid-column: span 3; }


/* gap */
.gap8 { gap: 8px; }
.gap10 { gap: 10px; }
.gap12 { gap: 12px; }
.gap14 { gap: 14px; }
.gap16 { gap: 16px; }
.gap18 { gap: 18px; }
.gap20 { gap: 20px; }
.gap24 { gap: 24px; }
.gap26 { gap: 26px; }
.gap30 { gap: 30px; }

/* overflow */
.overh { overflow: hidden; }

/* position */
.relative { position: relative; }
.absolute { position: absolute; }

/* vertical-align */
.vat { vertical-align: top; }
.vam { vertical-align: middle; }
.vab { vertical-align: bottom; }

/* font size */
.fz12 { font-size: 12px; }
.fz13 { font-size: 13px; }
.fz14 { font-size: 14px; }
.fz15 { font-size: 15px; }
.fz16 { font-size: 16px; }
.fz18 { font-size: 18px; }
.fz20 { font-size: 20px; }
.fz22 { font-size: 22px; }
.fz24 { font-size: 24px; }
.fz26 { font-size: 26px; }
.fz30 { font-size: 30px; }
.fz50 { font-size: 50px; }

/* font weight */
.fw300 { font-weight: 300; }
.fw400 { font-weight: 400; }
.fw700 { font-weight: 700; }
.fw800 { font-weight: 800; }

/* text */
.tdunder { text-decoration: underline; }
.skip { overflow: hidden; text-indent: -9999px; font-size: 0px; }
.pointer { cursor: pointer; }

/* border line */
.line_bt { border-top: 1px solid #ddd; }
.line_bb { border-bottom: 1px solid #ddd; }
.line_bl { border-left: 1px solid #ddd; }
.line_br { border-right: 1px solid #ddd; }
.nline_bt { border-top: none; }
.nline_bb { border-bottom: none; }
.nline_bl { border-left: none; }
.nline_br { border-right: none; }

/* input */
input[type="text"],
input[type="password"],
input[type="date"] { height: 40px; line-height: 40px; padding: 0 14px; background: #fff; border-radius: 6px; border: 1px solid #ddd; color: #555; font-size: 16px; }
input:focus, select:focus { outline: none; }

/* input readonly */
input[readonly] { background: #f3f3f3; border-color: #ddd; color: #adadad; cursor: default; }
input[readonly]::-webkit-input-placeholder { color: #adadad; }
input[readonly]:-ms-input-placeholder { color: #adadad; }
input[readonly]:-moz-placeholder { color: #adadad; }

/* input placeholder */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { color: #777; }
input:-ms-input-placeholder,
textarea:-ms-input-placeholder { color: #777; }
input:-moz-placeholder,
textarea:-moz-placeholder { color: #777; }

/* password input */
.pass_input { position: relative; display: inline-block; }
.pass_input input { width: 280px; padding: 0 50px 0 14px; }
.pass_input .icon_view i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #999; vertical-align: middle; font-size: 17px; }
.pass_input .icon_view i.fa-eye-slash { color: #b4b4b4; }

/* input 안내 문구 */
.input_feedback { margin-top: 6px; font-size: 15px; line-height: 1.4; }

/* 에러 상태 */
input.is_error, .pass_input.is_error input { border-color: #e54848; }
input.is_error + .input_feedback, .pass_input.is_error + .input_feedback { color: #e54848; }

/* 정상 입력 완료 상태 */
input.is_valid, .pass_input.is_valid input { border-color: #2ea44f; }
input.is_valid + .input_feedback, .pass_input.is_valid + .input_feedback { color: #2ea44f; }

/* checkbox */
input[type="checkbox"] { position: absolute; opacity: 0; }
input[type="checkbox"] + label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
input[type="checkbox"] + label span { position: relative; width: 18px; height: 18px; border: 1px solid #ccc; border-radius: 3px; background: #fff; box-sizing: border-box; transition: .2s ease; }
input[type="checkbox"] + label em { color: #555; }

/* 체크표시 */
input[type="checkbox"] + label span::after { content: ""; position:absolute; top: 50%; left: 50%; width: 8px; height: 4px; margin-top: -2px; border-style: solid; border-color :#fff; border-width: 0 0 2px 2px; transform-origin: center center; transform: translate(-50%,-50%) rotate(-45deg) scale(0); opacity:0; transition: transform .18s ease, opacity .18s ease; }
input[type="checkbox"]:checked + label span { background:#72809f; border-color:#72809f; }
input[type="checkbox"]:checked + label span::after { transform: translate(-50%,-50%) rotate(-45deg) scale(1); opacity: 1;}

/* 비활성 */
input[type="checkbox"]:disabled + label { cursor: default; }
input[type="checkbox"]:disabled + label span { border-color: #e7e7e7; background: #f3f3f3; }
input[type="checkbox"]:disabled:checked + label span::after { border-color: #bbb; }


/* radio */
input[type="radio"] + label { display: inline-flex; align-items: center; cursor: pointer; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
input[type="radio"] { display: none; }
input[type="radio"] + label span { display: inline-block; width: 18px; height: 18px; border: 1px solid #ccc; border-radius: 50%; margin-right: 8px; position: relative; transition: border-color 0.2s; }
input[type="radio"] + label em { color: #555; }

/* 라디오 표시 */
input[type="radio"]:checked + label span::after { content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; background: #72809f; border-radius: 50%; transform: translate(-50%, -50%); }
input[type="radio"]:checked + label span { border-color: #72809f; }
input[type="radio"] + label strong { text-decoration: underline; font-weight: 700; }

/* radio disabled */
input[type="radio"]:disabled + label { cursor: default;	opacity: .6; }
input[type="radio"]:disabled + label span { border-color: #ddd; background: #f1f1f1; }
input[type="radio"]:disabled:checked + label span::after { background: #aaa; }
 
/* date */
input[type="date"] { position: relative; height: 36px; background: #fff url('/images/egovframework/calendar_icon-2ee95c578ce087e36c09ea60f3c8413c.svg') no-repeat calc(100% - 12px) center / 15px; /* background: #fff url('/images/egovframework/calendar_fill-91149b2ed913d8e882a69d77d2f6b657.svg') no-repeat calc(100% - 12px) center / 15px; */ background-image: -moz-linear-gradient(-45deg, #fff 0%, #fff 50%); color: #555; font-size: 15px; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button { opacity: 0; appearance: none; }

/* scroll design */
body::-webkit-scrollbar, .scrollBar::-webkit-scrollbar { width: 6px; /* 스크롤바의 너비 */ height: 6px; z-index: 9999; }
#container.scrollBar::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { height: 25%; /* 스크롤바의 길이 */  background: #979797; /* 스크롤바의 색상 */ border-radius: 8px; }
#container.scrollBar::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #e3e5ec; border-radius: 8px;  /*스크롤바 뒷 배경 색상*/ }

/* 테이블 및 팝업용 */
.scrollBar::-webkit-scrollbar-thumb { height: 25%; /* 스크롤바의 길이 */  background: #dadbde; /* 스크롤바의 색상 */ border-radius: 8px; z-index: 9999; }
.scrollBar::-webkit-scrollbar-track { background: #f7f8fb; border-radius: 8px;  /*스크롤바 뒷 배경 색상*/ z-index: 9999; }

/* input file */
input[type="file"] { line-height: 34px; background: #f1f1f1; }
.file_input { display: inline-block; }
.file_input label { float: left; position: relative; display: inline-block; height: 36px; margin-left: 6px; padding: 0 13px; line-height: 36px; color: #777; border: 1px solid #ddd; background: #f6f6f6; text-align: center; vertical-align: middle; border-radius: 3px; overflow: hidden; }
.file_input label:hover { background: #f1f1f1; transition: .2s; }
.file_input label input { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; }
.file_input input[type="text"] { float: left; display: inline-block; height: 36px; line-height: 36px; vertical-align: middle; font-size: 14px; background: #fff; letter-spacing: 0.5px; }

select { height: 40px; line-height: 40px; padding: 0 30px 0 14px; appearance: none; background: #fff url(/images/egovframework/select_line-bac6b20a7f49800cfe984e963f7bda41.svg) no-repeat calc(100% - 12px) center / 12px; /* background: #fff url(/images/egovframework/select_fill-790ea92491469d9bee0244fbd5e3fa93.svg) no-repeat calc(100% - 12px) center / 12px; */ border-radius: 6px; border: 1px solid #ddd; font-size: 16px; color: #555; cursor: pointer; }
textarea { display: inline; line-height: 24px; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; color: #666; font-size: 17px; font-weight: 400; outline: none; resize: none; }


@media screen and (max-width: 1600px) {
}


@media screen and (max-width: 1400px) {

}


@media screen and (max-width: 1279px) {
}


@media screen and (max-width: 1023px) {
}

@media screen and (max-width: 839px) {	
	input[type="text"],
	input[type="date"],
	input[type="password"],
	select { height: 36px; line-height: 36px; font-size: 15px; }
	
	input[type="text"],
	input[type="date"] { padding: 0 12px; }
	select { padding: 0 36px 0 12px; }
	textarea { padding: 8px 12px; font-size: 15px; line-height: 22px; }
	
	/* password input */
	.pass_input { display: block; }
	.pass_input input { width: 100%; }
	.pass_input input { padding: 0 40px 0 12px;  }
    .pass_input .icon_view i { right: 14px; font-size: 15px; }

}

@media screen and (max-width: 480px) {
	
}