@charset "UTF-8";

/*RESET*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');



/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, button, textarea {
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
	font-family:'Noto Sans KR','굴림','돋움','gulim','dotum','arial', sans-serif;
	font-weight:200;
	letter-spacing:-0.5px;
}

html{font-size:10px; font-weight:200;}

img{
	max-width:100%;
	margin:0;
	padding:0;
	border:0;
	vertical-align:top;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
	display:block;
}

body{
	line-height:1;
}

ol, ul, dl, li{
	list-style:none;
}

blockquote, q{
	quotes:none;
}

blockquote:before, blockquote:after, q:before, q:after{
	content:'';
	content:none;
}

table{
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
}

legend, caption{
	width:0;
	height:0;
	margin:0;
	padding:0;
	font-size:0;
	line-height:0;
}

a {text-decoration:none;}
a:link, a:hover, a:active, a:visited{
	text-decoration:none;
	-webkit-tap-highlight-color:transparent;
}

textarea{
	font-family:'Noto Sans KR','굴림','돋움','gulim','dotum','arial', sans-serif;
    appearance:none;
	resize:none;
    -webkit-apprearance:none;
    -moz-appearance:none;
}

em, i, address{
    font-style:normal;
    font-weight:normal;
}

/*Select Reset*/
select::-ms-expand{display:none;} /* IE 10, 11의 네이티브 화살표 숨기기 */

select{
	font-family:'Noto Sans KR','굴림','돋움','gulim','dotum','arial', sans-serif;
	-webkit-appearance:none; /* 네이티브 외형 감추기 */
	-moz-appearance:none;
	appearance:none;
	background:#fff url(../img/ico_arrowBottom_off.png) no-repeat right 12px center; /* 화살표 모양의 이미지 */
}

select{
    height:38px;
	padding:0 12px;
    font-size:16px;
    color:#606060;
	font-weight:400;
    border:2px solid #ebebeb;
    border-radius:4px;
    outline:none !important;
}

select:focus{
    border:2px solid #d3d3d3;
    font-weight:500;
    color:#606060;
}

.searchbox_line select{
    width:180px;
    height:46px;
	margin-right:7px;
}

/*Button*/
button{
	display:inline-block;
	box-shadow:none;
	overflow:visible;
	cursor:pointer;
	outline:none;
}

/*input*/
input::-ms-clear,
input::-ms-reveal{
	display:none;
	width:0;
	height:0;
}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
	display:none;
}

input{
	height:38px;
	padding:0 12px;
	border:2px solid #ebebeb;
	font-size:16px;
	font-weight:400;
	color:#606060;
	border-radius:4px;
	outline:none;
	box-sizing:border-box;
    -webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

input:focus{
	border:2px solid #03389a !important;
	font-weight:400 !important;
}

.disable{
	background:#f6f6f8;
	cursor:inherit;
}

input.disable:focus{
	border:2px solid #ebebeb;
	font-weight:400 !important;
}

/* Datepicker */
.datepicker{
	padding-right:40px;
	background:url(../img/icon_datepicker_off.png) no-repeat right 4px center;
	background-size:32px;
	transition:all .2s linear;
	cursor:pointer;
}

.datepicker:focus,
.datepicker:hover,
.datepicker:active{
	background:url(../img/icon_datepicker_on.png) no-repeat right 4px center;
	background-size:32px;
}

/*Flie upload*/
.fileBox input[type="file"]{
	position:absolute;
	width:0;
	height:0;
	padding:0;
	overflow:hidden;
	border:0 !important;
  }

  .filebox label{
	cursor:pointer;
  }

  /* named upload */
  .fileBox .fileName{
	height:38px;
	padding:0 12px;
	border:2px solid #ebebeb;
	font-size:16px;
	font-weight:400;
	color:#606060;
	border-radius:4px;
	outline:none;
	text-overflow:ellipsis;
	white-space:nowrap;
	word-break: break-all;
	box-sizing:border-box;
    -webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
  }

  .fileMark{
    display:inline-block;
	height:38px;
    word-break:break-all;
	width:auto;
	vertical-align:top;
	margin-left:10px;
  }

/*Textarea*/
textarea{
	outline:none;
}

.userWrite_box{
	width:100%;
	height:auto;
	min-height:200px;
	max-height:500px;
	overflow-y:auto;
	border-radius:4px;
	padding:10px;
	border:1px solid #d4d9e1;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	font-size:16px;
	color:#606060;
	font-weight:400;
}

.userWrite_box.detail{
	padding:0;
	border:none;
}

/*Checkbox & Radiobox Ui Customzing*/

/* Customize the label (the container) */
.container{
	display:block;
	position:relative;
	height:18px;
	line-height:18px;
	padding-left:26px;
	cursor:pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
  }

.container.checkArea{
	display:inline-block;
	font-size:16px;
	font-weight:400;
	color:#606060;
}

/* Hide the browser's default checkbox */
.container input{
	position:absolute;
	opacity:0;
	cursor:pointer;
	height:0;
	width:0;
}

/* Create a custom checkbox */
.checkmark{
	position:absolute;
	top:0;
	left:0;
	height:18px;
	width:18px;
	border-radius:2px;
	border:2px solid #ebebeb;
	background:#fff url(../img/icon_check_off.png) no-repeat center center;
	transition:all .2s linear;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark{
	background:#fff url(../img/icon_check_off.png) no-repeat center center;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark{
	border:2px solid #03389a;
	background:#03389a url(../img/icon_check_on.png) no-repeat center center;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after{
	display:block;
	background:#03389a;
}

.radiomark{
	position:absolute;
	top:0;
	left:0;
	height:18px;
	width:18px;
	border-radius:50%;
	border:2px solid #ebebeb;
	background:#fff url(../img/icon_check_off.png) no-repeat center center;
	transition:all .2s linear;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .radiomark{
	background:#fff url(../img/icon_check_off.png) no-repeat center center;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .radiomark{
	border:2px solid #03389a;
	background:#03389a url(../img/icon_check_on.png) no-repeat center center;
}

/* Show the checkmark when checked */
.container input:checked ~ .radiomark:after{
	display:block;
	background:#03389a;
}

/*Common Class*/
body.is-open{position:fixed; top:0;	left:0;	width:100%;	overflow:hidden;}
.hidden{position:absolute; left:-10000px; top:auto;	width:0; height:0; overflow:hidden;}
.hide_txt{text-indent:-9999px; font-size:0;}
.clearfix:after{display:block; clear:both; content:'';}
.tac{text-align:center !important;}
.tal{text-align:left !important;}
.tar{text-align:right !important;}
.f_left{float:left;}
.f_right{float:right;}
.tc{display:table-cell; vertical-align:middle;}
.wbka{word-break:keep-all;}
.wbba{word-break:break-all;}
.db{display:block;}
.ib{display:inline-block;}
.txt_ellipsis{width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* Position */
.rel{position:relative;}
.abs{position:absolute;}
.t0r0{top:0; right:0;}
.t0l0{top:0; left:0;}

/* Width-Size */
.wd10px{width:10px !important;}
.wd20px{width:20px !important;}
.wd30px{width:30px !important;}
.wd40px{width:40px !important;}
.wd50px{width:50px !important;}
.wd60px{width:60px !important;}
.wd70px{width:70px !important;}
.wd80px{width:80px !important;}
.wd90px{width:90px !important;}
.wd100px{width:100px !important;}
.wd111px{width:111px !important;}
.wd120px{width:120px !important;}
.wd130px{width:130px !important;}
.wd150px{width:150px !important;}
.wd200px{width:200px !important;}
.wd250px{width:250px !important;}
.wd500px{width:500px !important;}

/* Width-Size : Percent */
.wd10per{width:10% !important;}
.wd15per{width:15% !important;}
.wd20per{width:20% !important;}
.wd25per{width:25% !important;}
.wd30per{width:30% !important;}
.wd35per{width:35% !important;}
.wd40per{width:40% !important;}
.wd45per{width:45% !important;}
.wd50per{width:50% !important;}
.wd55per{width:55% !important;}
.wd60per{width:60% !important;}
.wd65per{width:65% !important;}
.wd70per{width:70% !important;}
.wd80per{width:80% !important;}
.wd90per{width:90% !important;}
.wd100per{width:100% !important;}

/* Height */
.h38{height:38px !important;}
.h46{height:46px !important;}
.h50{height:50px !important;}

/* Line-hight */
.lh_h30{line-height:30px !important;}
.lh_h34{line-height:34px !important;}
.lh_h36{line-height:36px !important;}
.lh_h38{line-height:38px !important;}
.lh_h46{line-height:46px !important;}
.lh_h44{line-height:44px !important;}
.lh_h50{line-height:50px !important;}

/*Margin & Padding*/
.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt50{margin-top:50px !important;}
.mt32{margin-top:32px !important;}
.mr1{margin-right:1px !important;}
.mr2{margin-right:2px !important;}
.mr3{margin-right:3px !important;}
.mr5{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.ml3{margin-left:3px !important;}
.ml10{margin-left:10px !important;}
.mr15{margin-right:15px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb30{margin-bottom:30px !important;}
.mb32{margin-bottom:32px !important;}
.mlNo{margin-left:0 !important;}

.ptNo{padding-top:0 !important;}

/* Font-Weight */
.fw100{font-weight:100;}
.fw200{font-weight:200;}
.fw300{font-weight:300;}
.fw400{font-weight:400 !important;}
.fw500{font-weight:500 !important;}
.fw600{font-weight:600 !important;}
.fw700{font-weight:700;}
.fw800{font-weight:800;}

/*font-size*/
.fs14{font-size:14px !important;}
.fs16{font-size:16px !important;}

/* Font-Color */
.txt_black{color:#000;}
.txt_white{color:#fff;}
.txt_skyblue{color:#1767e0;}
.txt_deepblue{color:#03389a;}
.txt_gray{color:#a3a8af;}
.txt_red{color:#db1813;}
.txt_green{color:#15c757;}

/*background*/
.white{background:#fff;}
.light_gray{background:#f6f6f8;}
.gray{background:#868686;}
.deepgray{background:#2f2e34;}
.skyblue{background:#1767e0;}
.deepblue{background:#03389a;}
.green{background:#15c757;}
.red{background:#c50f0f;}
.light_red{background:#ffefef;}

/*Vertical-align*/
.vr_t{vertical-align:top;}
.vr_m{vertical-align:middle;}
.vr_b{vertical-align:bottom;}

/*Border*/
.bor_No{border:none !important;}
.borT_No{border-top:none;}
.borT_gray{border-top:1px solid #dfe3e9 !important;}
.borR_No{border-right:none !important;}
.borB_No{border-bottom:none !important;}
.borL_No{border-left:none !important;}

.bor_skyblue{border:1px solid #1767e0;}
.bor_2px_skyblue{border:2px solid #1767e0;}
.bor_deepblue{border:1px solid #03389a;}
.bor_2px_gray{border:2px solid #b8bdc6;}
.bor_lightgray{border:1px solid #d4d9e1;}
.bor_2px_green{border:2px solid #15c757;}
.bor_red{border:1px solid #c50f0f;}
.bor_2px_red{border:2px solid #c50f0f;}


/******************************************************* Common Ui *******************************************************/

/*Button*/
.btn{
	display:inline-block;
	border-radius:25px;
	font-size:16px;
	font-weight:400;
	transition:all .2s linear;
	box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}

.tablebtn{
	display:inline-block;
	border-radius:4px;
	font-size:16px;
	font-weight:400;
	transition:all .2s linear;
	box-sizing:border-box;
    -webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	cursor:pointer;
}

.btn.skyblue:focus, .tablebtn.skyblue:focus,
.btn.skyblue:active, .tablebtn.skyblue:active,
.btn.skyblue:hover, .tablebtn.skyblue:hover{
	background:#2276f3;
}

.btn.deepblue:focus, .tablebtn.deepblue:focus,
.btn.deepblue:active, .tablebtn.deepblue:active,
.btn.deepblue:hover, .tablebtn.deepblue:hover{
	background:#1853bf;
}

.btn.light_gray:focus, .tablebtn.light_gray:focus,
.btn.light_gray:active, .tablebtn.light_gray:active,
.btn.light_gray:hover, .tablebtn.light_gray:hover{
	border:2px solid #ebebeb;
}

.btn.white:focus, .tablebtn.white:focus,
.btn.white:active, .tablebtn.white:active,
.btn.white:hover, .tablebtn.white:hover{
	border:2px solid #ebebeb;
}

.btn.gray:focus, .tablebtn.gray:focus,
.btn.gray:active, .tablebtn.gray:active,
.btn.gray:hover, .tablebtn.gray:hover{
	background:#a09f9f;
}

.btn.deepgray:focus, .tablebtn.deepgray:focus,
.btn.deepgray:active, .tablebtn.deepgray:active,
.btn.deepgray:hover, .tablebtn.deepgray:hover{
	background:#504e58;
}

.btn.bor_2px_skyblue:focus, .tablebtn.bor_2px_skyblue:focus,
.btn.bor_2px_skyblue:active, .tablebtn.bor_2px_skyblue:active,
.btn.bor_2px_skyblue:hover, .tablebtn.bor_2px_skyblue:hover{
	border:2px solid #0096f4;
	color:#0096f4;
}

.btn.green:focus, .tablebtn.green:focus,
.btn.green:active, .tablebtn.green:active,
.btn.green:hover, .tablebtn.green:hover{
	background:#16d05c;
}

.btn.bor_2px_green:focus, .tablebtn.bor_2px_green:focus,
.btn.bor_2px_green:active, .tablebtn.bor_2px_green:active,
.btn.bor_2px_green:hover, .tablebtn.bor_2px_green:hover{
	border:2px solid#16d05c;
	color:#16d05c;
}

.icon_file{
	display:inline-block;
	width:27px;
	height:19px;
	background:url(../img/icon_file_on.png) no-repeat center center;
	vertical-align:middle;
}

.icon_delete{
	position:absolute;
	top:0;
	right:5px;
	display:inline-block;
	width:38px;
	height:38px;
	background:#f6f6f8 url(../img/icon_delete_off.png) no-repeat center center;
	background-size:30px;
	text-align:center;
	border-radius:0 4px 4px 0;
	box-sizing:border-box;
	transition:all .2s linear;
}

.icon_delete:hover,
.icon_delete:focus{
	background:url(../img/icon_delete.png) no-repeat center center;
	background-size:30px;
}