*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {height:100%;}
body { margin:0; padding:0; font-size:14px; min-height:100%; position:relative;font-family:Nanum Gothic, Gulim; }
div, p, span, td, th { color:rgb(59, 59, 59); }
form { margin:0; padding:0; }
ul { list-style-type:none; margin:0; padding:0;}
li,dl,dt,dd { margin:0; padding:0;}
hr { display:none; }
caption { display: none; }
img, type-image, fieldset { border: 0 none; margin:0; padding:0; }
img{ max-width:100% }
legend{ display:none; }
a:link, a:visited { color: inherit; text-decoration: none; }
a:active, a:hover { color: inherit; text-decoration: none; }
select { padding:0; margin:0; border:1px solid #dadada; }
input.type-text, textarea { border: 1px solid #ddd; background: #fff; padding: 1px; }
input.type-text:hover, input.type-text:focus, textarea:hover, textarea:focus, select:hover, select:active { background-color: #fff; }
input, select, textarea { vertical-align: middle; font-size: 1em; color: #666; }
h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
img { border: medium none; vertical-align: middle; }
button{box-shadow:none;border:none;cursor:pointer;vertical-align:middle;}
#pwabutton { background-color:rgb(255, 191, 0); color: white; padding: 0px 0px; margin: 0px 0px 0px 0px; border: none; cursor: pointer; width: 100%;}
input[type=checkbox]
{
	width:20px;
	height:20px;
}

/* body */
.wrapper{ min-height:100%  }

/* header area */
#header { margin-bottom:4px; width:100%; text-align:center; background-color:rgb(52,131,202); position:fixed; top:0; left:0; z-index:10;}
#header img { display:inline-block; line-height:82px; max-width:178px; }

/* contianer area */
#contianer { background-color:white; width:100%; padding:44px 0 44px 0;}

/* login section */
#login { width:100%; height:100%; margin:0; padding:0px; }
#login .content input[type=text], #login .content input[type=password], #login .content select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; border-radius: 4px;}
/* button { background-color:rgb(255, 191, 0); color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } */
button { background-color:rgb(255, 191, 0); color: white; padding: 14px 20px; margin: 8px 0px 0px 0px; border: none; cursor: pointer; width: 100%; }
button:hover { opacity: 0.8; }
.cancelbtn { width: auto;padding: 10px 18px; background-color: #f44336; }
.imgcontent { text-align: center; margin: 24px 0 12px 0; }
.content { padding: 16px; }
span.psw { float: right; padding-top: 16px;}

.textresize { font-size:16px; }
.checkMargin { margin-top:5px; }


/* main section */
#main { float:left; width:100%; }
#main .menuList {
	float:left;
	/* width:calc(100% / 6 - 30px); */
	width:auto;
    height:auto;
    line-height:auto;
    position: relative;
    padding: 0 !important;
	margin-top: 3%;
    margin-bottom: 3%;
    /* transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
	-webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2); */
	/* box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);
	background-color:rgb(218,227,243); */
	border-radius: 20px;
	text-align:center;
}

#main img { padding:10px; position:relative; }
#parinfo{ position:relative; display:inline-block; width:100%; height:44px; }
/* #parinfo img { position: fixed; } */
#parinfo img { position: absolute;line-height:auto;z-index:9 }

/* workcheck section */
#workcheckHeader ul li{height:50px; line-height:38px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; float:left; width:100%; border:1px solid #ccc; box-sizing:border-box; }
#workcheckContent .rowLine1 {text-align: center; }
#workcheckContent .rowLine1 .rowbox {display:inline-block; }
#workcheckContent .rowLine1 .circle{
	border-radius: 50%; /* the magic */
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	justify-content: center;
	align-items: center;
	text-align: center;
	display: flex;
	width:200px;
	height:200px;
	line-height:200px;
	font-weight:bold;
	font-family: Arial;
	margin: 10px;
}
#workcheckContent .rowLine1 .rowbox .bluecircle{ background-color:blue;color:red;border-style: solid; }
#workcheckContent .rowLine1 .rowbox .greencircle{ background-color:green;color:red;border-style: solid; }
#workcheckContent .rowLine1 .rowbox .lightbluecircle{ background-color:lightblue;color:white; }
#workcheckContent .rowLine1 .rowbox .lightgreencircle{ background-color:lightgreen;color:white; }


@media only screen and (max-width: 1280px) {
	/* #main .menuList {width:calc(100% / 6 - 30px);} */
	#main .menuList {width:150px;height:100px;}
	#main img { padding:10px; position:relative; width:100px; height:100px; }
}

@media only screen and (max-width: 1024px) {
	/* #main .menuList {width:calc(100% / 4 - 30px);} */
	#main .menuList {width:150px;height:100px;}
	#main img { padding:10px; position:relative; width:100px; height:100px; }
}

@media only screen and (max-width: 740px) {
	/* #main .menuList {width:calc(100% / 3 - 30px);} */
	#main .menuList {width:150px;height:100px;}
	#main img { padding:10px; position:relative; width:60px; height:60px; }
}

@media only screen and (max-width: 400px) {
	/* #main .menuList {width:calc(100% / 2 - 30px);} */
	#main .menuList {width:150px;height:100px;}
	#main img { padding:10px; position:relative; width:60px; height:60px; }
}

@media only screen and (max-height: 725px) {
	#workcheckContent .rowLine1 .circle{width:150px; height:150px;}
}

.htmlData {
	padding-top:10px;
	margin-left:10px;
	margin-right:10px;
	/* overflow-x: auto; */
}

/* notice list section */
#noticeList { width:100%; margin:0; padding:0px; }

#noticeHeader ul li{height:50px; line-height:38px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; float:left; width:100%; text-align:center; border:1px solid #ccc; box-sizing:border-box;  }
#noticeHeader select { width:auto; padding: 3px 16px 5px 6px; display: inline-block; background-color:white; border: 1px solid rgb(136, 201, 226); box-sizing: border-box; border-radius: 2px; }
#noticeHeader .sideNav { margin:0px; }
#noticeHeader img { position:relative;float:left; margin:5px 5px 10px 10px;}
#noticeHeader .noticeSelect { float:left; margin:5px 5px 10px 20px; }
#noticeHeader .sideTitle {width:20px; margin:10px 5px 10px 10px; cursor: pointer; }
.pointok { width:16px; height:16px; float:right; margin-right:2px; margin-top:4px; }
.fileok { width:16px; height:16px; margin-right:5px; }

#listContent ul li { overflow:hidden;padding:5px;padding-bottom:5px;border-bottom: 1px solid rgba(189, 215, 238, 0.637);}
#listContent .rowLine1 { padding-left:5px;line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top:2px; margin-right:10px; }
#listContent .rowLine2 { margin-left:5px; min-width:0px;white-space:nowrap;line-height:25px; }
#listContent .rowLine2_1 { font-size:1em;line-height: 20px;color:rgba(155, 156, 159, 1) !important; }
#listContent .rowLine2_2 { font-size:1em;float:right;padding-right:10px;color:rgba(155, 156, 159, 1) !important; }

/* Sidebar */
/* .sidebar { position: fixed; z-index: 9999999; left: 0; top: 0; height: 100%; width: 280px; background: rgba(230, 230, 230, 1);
	border-right:1px solid #181818; overflow:auto; -webkit-transition: left 0.3s ease, -webkit-box-shadow 0.3s ease 0.2s; transition: left 0.3s ease, box-shadow 0.3s ease 0.2s; } */
.sidebar { position: fixed; z-index: 9999999; left: 0; top: 0; height: 100%; width: 280px; background: #E5EBF7;
	border-right:1px solid #181818; overflow:auto; -webkit-transition: left 0.3s ease, -webkit-box-shadow 0.3s ease 0.2s; transition: left 0.3s ease, box-shadow 0.3s ease 0.2s; }	
.sidebar #close { float: right;text-align: right; }
#noticeList .closed { left: -280px; -webkit-box-shadow: 0 0 0 #1abc9c; box-shadow: 0 0 0 #1abc9c; }
#emlList .closed { left: -280px; -webkit-box-shadow: 0 0 0 #1abc9c; box-shadow: 0 0 0 #1abc9c; }
/* .sidebar .cat-menu{height:70px;padding-left:50px;color:#fff;font-weight:400;font-size:15px;line-height:70px;position:relative;background-color:rgba(117, 117, 117, 1);background-image:url(../../assets/img/sidebar.png); background-size:10px; background-repeat:no-repeat;background-position:20px 50%;} */
.sidebar .cat-menu{height:70px;padding-left:50px;color:#fff;font-weight:400;font-size:15px;line-height:70px;position:relative;background-color:#4E8DF5;background-image:url(../../assets/img/sidebar.png); background-size:10px; background-repeat:no-repeat;background-position:20px 50%;}
.sidebar a.btn-close{position:absolute;top:20px;right:20px;width:20px;height:20px;background:url(../../assets/img/x_3464.png) no-repeat;background-size:100%;}
.sidebar a.btn-notice{display:block;background:#f9ed3a;margin:15px;color:#333;text-align:center;height:40px;line-height:40px;
  border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;}
.accordion {}
.accordion:after{content:'';display:block;clear:both;}
.accordion ul{float: left; display: block; width: 100%; }
.accordion>li{float: left; display: block; width: 100%; height:45px; border-bottom: 1px gray solid;}
/* .accordion>li>a {font-size:14px;color:black;font-weight:600;padding:15px;line-height:1;display:block; cursor: pointer; background:rgba(230, 230, 230, 1)} */
.accordion>li>a {font-size:14px;color:black;font-weight:600;padding:15px;line-height:1;display:block; cursor: pointer; background:#E5EBF7}
/* .accordion>li{float: left; display: block; width: 100%;} */
/* .accordion>li>a {border-bottom:1px solid gray; font-size:14px;color:black;font-weight:600;padding:9px 20px 11px;line-height:1;display:block; cursor: pointer; background:rgba(230, 230, 230, 1)} */
.accordion>li.active>a{color:#fff;}
.accordion>li>ul{background:rgba(230, 230, 230, 1);padding:10px 0;display:block;}
.accordion>li>ul>li>a{background:rgba(230, 230, 230, 1) url(../../assets/img/blt_leftmenu.png) no-repeat 24px 11px;display:block;font-size:13px;padding:3px 20px 3px 40px;color:#fff;letter-spacing:-0.05em;}

/* noticeDetail section */
#noticeDetail { width:100%; margin:0px; padding:0px; }
#noticeDetail .noticeHeader ul li{height:50px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; width:100%; border:1px solid #ccc; box-sizing:border-box; line-height:50px; }
#noticeDetail .noticeHeader img { position:relative;float:left; margin:5px 5px 10px 10px;}

#noticeDetail .detailInfo ul li { padding:5px; }
#noticeDetail .detailInfo ul li { background:white;display:block; padding:5px 10px 5px 10px;}
/* .btnBack { width:30px;height:30px;margin:5px;border:1px solid rgba(215, 213, 213, 1); border-radius: 4px; cursor: pointer;  } */
.btnBack { width:30px;height:30px;margin:5px;cursor: pointer; }
#noticeDetail .detailInfo .noticeTitle { font-size:1.2em; color:blue }
#noticeDetail .detailInfo .noticeInfo { margin:1px; border-top:1px solid black; height:auto; }
#noticeDetail .detailInfo .noticeContent { border-top:1px solid black; height:auto;}
#noticeDetail .detailAtts { display: block; border-top:1px solid #CDCDCD;}
#noticeDetail .detailAtts span { display: block; color:blue; cursor: pointer; }
#noticeDetail .detailAtts span span { color:red; display:inline-block; margin-left:5px; }

/* approval section */
#approvalList { width:100%; margin:0; padding:0px; }

#approvalHeader ul li{height:50px; line-height:50px; vertical-align:middle; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; float:left; width:100%; text-align:center; border:1px solid #ccc; box-sizing:border-box;  }
#approvalHeader select { width:auto; padding: 3px 16px 5px 6px; display: inline-block; background-color:white; border: 1px solid rgb(136, 201, 226); box-sizing: border-box; border-radius: 2px; }
#approvalHeader .sideNav { margin:0px; }
#approvalHeader img { position:relative;float:left; margin:5px 5px 10px 10px;}
#approvalHeader .noticeSelect { float:left; margin:5px 5px 10px 10px; }
#approvalHeader .sideTitle { width:20px;;height:20px;margin:5px; }

#approvalContent ul li { overflow:hidden;padding:5px;padding-bottom:5px;border-bottom: 1px solid rgb(189,215,238);}
#approvalContent .rowLine1 { padding-left:5px; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top:2px; margin-right:10px; }
#approvalContent .rowLine2 { margin-left:5px; min-width:0px;white-space:nowrap;line-height:25px; }
#approvalContent .rowLine2_1 { font-size:1em; line-height: 20px; }
#approvalContent .rowLine2_2 { font-size:1em;float:right;padding-right:10px; }
#approvalContent .rowLine2_3 { font-size:1em;}

/* approval detail section */
#approvalDetail { width:100%; margin:0px; padding:0px; }
#approvalDetail .noticeHeader ul li{height:50px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; width:100%; border:1px solid #ccc; box-sizing:border-box; line-height:50px; }
#approvalDetail .noticeHeader img { position:relative;float:left; margin:5px 5px 10px 10px;}

#approvalDetail .detailInfo ul li { padding:5px; }
#approvalDetail .detailInfo ul li { background:white;padding:10px 0;display:block;padding:0px 10px 0px 10px;}
#approvalDetail .detailInfo .noticeTitle { border-bottom:1px solid #2985c5;}
#approvalDetail .detailInfo .noticeTitle1 { border-bottom:1px solid rgb(189,215,238);}
#xxx-approvalDetail .detailInfo .noticeTitle1 .title { font-size:1.2em; }
#approvalDetail .detailInfo .noticeTitle1 .subtitle { font-size:1em;margin-left:10px; }
#approvalDetail .detailInfo .noticeContent { border-top:1px solid #2985c5; height:auto;}

/* #approvalDetail .table { padding:60px 10px 10px 10px; } */
#approvalDetail .table { padding: 1px 1px 1px 1px; }
#approvalDetail .table .detable { width:100%; border-bottom:1px solid #2985c5; border-collapse: collapse;}
#approvalDetail .table .detabletd { border-bottom: 1px solid rgb(189,215,238) !important; padding: 10px; }
#approvalDetail  { display: block; border-top:1px solid #CDCDCD;}
#approvalDetail .detailAtts { display: block; color:blue; cursor: pointer; }
#approvalDetail .detailAtts span { color:red; display:inline-block; margin-left:5px; }

/* .apvbtn {
	width:50px;height:35px;
	position: relative;
	display: block;
	margin: 2px auto;
	padding: 0;
	overflow: hidden;
	border-width: 0;
	border-radius: 2px;
	border: 1px solid black;
	background-color: white;
	color: black;
	line-height:35px;
  }
.apvbtn:hover { background-color: #50aaad; } */
.apvbtn { margin: 0 auto; border-radius: 30px; background-color: #ffffcc; color: black; width:50px;height:35px; line-height:35px; border:1px solid #2985c5; padding:0; margin-right:5px; }
.apvbtn span { display: block; }


/* approvalProc section */
#approvalProc { width:100%; margin:0; padding:0px; }

/* approval detail section */
#approvalProc { width:100%; margin:0px; padding:0px; }
#approvalProc .approvalProcHeader ul li{height:50px; line-height:38px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; float:left; width:100%; border:1px solid #ccc; box-sizing:border-box; }
#approvalProc .approvalProcHeader img { position:relative;float:left; margin:-35px 5px 10px 10px;}

/* #approvalProc .detailInfo { padding:60px 10px 10px 10px; }
#approvalProc .detailInfo table { width:100%; border:1px solid #2985c5; }
#approvalProc .detailInfo table tr, th, td { border:1px solid rgb(189,215,238);  border-collapse:collapse; height:40px; } */

/* #approvalProc .detailInfo { padding:60px 10px 10px 10px; } */
#approvalProc .detailInfo { padding:60px 0px 0px 0px; }
#approvalProc .detailInfo .detailtable { width:100%; border-bottom:1px solid #2985c5; border-collapse: collapse;}
#approvalProc .detailInfo .detailthtd { border-bottom: 1px solid rgb(189,215,238); padding: 10px; }

#approvalProc .buttonBox { text-align:center; padding:5px;}

.regBtn { margin: 0 auto; border-radius: 30px; background-color: #ffffcc; color: black; width:80px; height:30px; border:1px solid #2985c5; padding:0; margin-right:5px; }

/* approvalOpnion section */
#approvalOpnion { width:100%; margin:0px; padding:0px; }
#approvalOpnion .approvalOpnionHeader ul li{height:50px; line-height:38px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; float:left; width:100%; border:1px solid #ccc; box-sizing:border-box; }
#approvalOpnion .approvalOpnionHeader img { position:relative;float:left; margin:-35px 5px 10px 10px;}
.detailNoti { text-align:center; font-size:1.3em; position: relative; display:block; }

/* #approvalOpnion .opnionInfo { padding:10px;} */
#approvalOpnion .opnionInfo .opniontable { width:100%; }
#approvalOpnion .opnionInfo .tabletd{ border:none; height:auto !important; padding-left:5px; border-bottom:none !important;}


/* #approvalOpnion .opnionList { padding:10px; position: absolute; width:99.2%; height:350px;overflow:auto; } */
#approvalOpnion .opnionList { position: absolute; height:350px;overflow-y:auto;width:100%; }
#approvalOpnion .opnionList .opniondetail { width:100%; }
#approvalOpnion .opnionList .opniondetailtd { border:none; border-bottom:none !important; padding-right:5px; padding-left:5px; height:auto !important;}


/* expremp section */
#exprempList { width:100%; margin:0; padding:0px; }

#exprempHeader ul li{height:50px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; float:left; width:100%; text-align:center; border:1px solid #ccc; box-sizing:border-box; line-height:50px; }
#exprempHeader select { width:auto; padding: 2px; margin: 0px; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 3); }
#exprempHeader .sideNav { margin:0px; }
#exprempHeader img { position:relative;float:left; margin:5px 5px 10px 10px;}
#exprempHeader .noticeSelect { float:left; margin:5px 5px 10px 10px; }
#exprempHeader .sideTitle { width:20px;;height:20px;margin:5px; }

#exprempContent ul li { overflow:hidden;padding:5px;padding-bottom:5px;border-bottom: 1px solid rgb(189,215,238);}
#exprempContent .rowLine1 { padding-left:5px; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top:2px; margin-right:10px; }
#exprempContent .rowLine2 { margin-left:5px; min-width:0px; white-space:nowrap;line-height:25px; }
#exprempContent .rowLine2_1 { font-size:1em; line-height: 20px; }
#exprempContent .rowLine2_2 { font-size:1em;float:right;padding-right:10px; }
#exprempContent .rowLine2_3 { font-size:1em;}

/* eml list section */
#emlList { width:100%; margin:0; padding:0px; }

/* #emlHeader ul li{height:50px; line-height:38px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; float:left; width:100%; border:1px solid #ccc; box-sizing:border-box; } */
#emlHeader ul li{height:50px; line-height:38px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; float:left; width:100%; border:1px solid #ccc; box-sizing:border-box; }
#emlHeader select { width:auto; padding: 3px 16px 5px 6px; display: inline-block; background-color:white; border: 1px solid rgb(136, 201, 226); box-sizing: border-box; border-radius: 2px; }
#emlHeader .sideNav { margin:0px; }
#emlHeader img { position:relative;float:left; margin:5px 5px 10px 10px;}
#emlHeader .noticeSelect { float:left; margin:5px 5px 10px 10px; }
#emlHeader .sideTitle { cursor: pointer; }


#emllistContent ul li { padding:5px;}
/* #emllistContent ul li:nth-child(2n) {background-color:rgb(218,227,243);} */
#emllistContent ul li { overflow:hidden;padding:5px;padding-bottom:5px;border-bottom: 1px solid rgb(189,215,238);}
#emllistContent .rowLine1 { padding-left:5px; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top:2px; margin-right:10px; }
#emllistContent .rowLine2 { margin-left:5px; min-width:0px;white-space:nowrap;line-height:25px; }
#emllistContent .rowLine2_1 { font-size:1em; line-height: 20px; }
#emllistContent .rowLine2_2 { font-size:1em;float:right;padding-right:10px; }
#emllistContent .rowLine2_3 { font-size:1em;}

/* emlDetail section */
#emlDetail { width:100%; margin:0px; padding:0px; }
#emlDetail .noticeHeader ul li{height:50px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; width:100%; border:1px solid #ccc; box-sizing:border-box; line-height:50px; }
#emlDetail .noticeHeader img { position:relative;float:left; margin:5px 5px 10px 10px;}

#emlDetail .detailInfo ul li { height: 70px; padding:5px; }
#emlDetail .detailInfo ul li { background:white;padding:10px 0;display:block; line-height: 50px;padding:0px 10px 0px 10px;}
#emlDetail .detailInfo .noticeTitle { font-size:1.2em; height:50px;}
#emlDetail .detailInfo .noticeInfo { height:35px;}
#emlDetail .detailInfo .noticeContent { border-top:1px solid #CDCDCD; height:auto;}

.btn {
	position: relative;
	display: block;
	margin: 2px auto;
	padding: 0;
	overflow: hidden;
	border-width: 0;
	outline: none;
	border-radius: 2px;
	box-shadow: 0 1px 4px 1px rgba(0, 0, 0, .6);
	background-color: rgb(228, 228, 228);
	color: black;
  }
.btn span { display: block; }
  
/* footer area */
#footer { float:left; width:100%; height:44px; background-color:rgb(52,131,202); box-shadow: 0 2px 6px rgba(0, 0, 0, 3); position:fixed;left:0;bottom: 0; z-index:10;}
#footer .cmpInfo { float:left;margin:10px;color:white;font-size:1em;line-height:21px;}
#footer .userInfo { float:right;margin:10px;color:white;font-size:1em;}
#footer .userInfo b { margin-right:10px; }

#footer .circle {
	border-radius: 50%; /* the magic */
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	text-align: center;
	display:inline-block;
	width:20px;
	height:20px;
	vertical-align:middle;
}
#footer .redcircle { background-color:red; }
#footer .greedcircle { background-color:green; }
#footer .graycircle { background-color:yellow; }

.boxstyle {
    width: 100%;
	height: 100%;
	text-align:center;
}
.boxstyle1 {
	display:inline-table;
	height: 100%;
	widows: 10%;
	text-align:center;
	padding:8px;
	vertical-align:middle;
}

.boxtext {
	display:inline-block;
	vertical-align:middle;
	color:white;
	padding-left:5px;
}

.box1style {
    width: 100%;
	height: 100%;
	text-align: center;
	padding:8px;
}
.box1style1 {
	margin:0 auto;
	width:100%;
}


#title { float:left;font-size:1.1em; }
#subtitle { float:left;font-size:1em;margin-left:10px; }

/* .pagination { padding:0; margin:5px auto; text-align:center; } */
.pagination { padding:0; padding:5px; text-align:center; }
.pagination #btnPager {
	width: 40px;
	height:30px;
	position: relative;
	display: block;
	margin: 5px;
	padding: 0;
	overflow: hidden;
	border-width: 0;
	outline: none;
	border-radius: 2px;
	box-shadow: 0 1px 4px 1px rgba(0, 0, 0, .3);
	background-color: #3483CA;
	opacity: 0.9;
	/* color: black; */
	transition: background-color .3s;
	display: inline-block;
	line-height: 3px;
}
.pagination #page { margin:5px; }

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
	src: local('Material Icons'),
	  local('MaterialIcons-Regular'),
	  url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
	  url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
	  url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
  }

  .material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;
	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;
	/* Support for IE. */
	font-feature-settings: 'liga';
	user-select: none;
  }



    /* line section */
#lineHeader ul li{height:50px; line-height:38px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; float:left; width:100%; border:1px solid #ccc; box-sizing:border-box; }
#lineHeader select { width:auto; padding: 2px; margin: 0px; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 3); }
#lineHeader img { position:relative;float:left; margin:-35px 10px 10px 10px;}

#lineContent ul li { padding:5px;}
/* #lineContent ul li { padding:5px;padding-bottom:5px;border-bottom: 1px solid rgb(189,215,238);} */
#lineContent ul li { border-bottom: 1px solid rgb(189,215,238);}
#lineContent ul li:first-child { padding-top: 57px;}
#lineContent .rowLine1 { padding:0px 10px 0px 10px; }
#lineContent .rowLine1 ul { display: inline-block; float:right; }
#lineContent .rowLine1 ul li { display:inline-block; border:none; }
#lineContent .rowLine1 .rowbox { line-height:100%; float:right; }
#lineContent .rowLine1 .rowbox .circle {
	border-radius: 50%; /* the magic */
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	text-align: center;
	display:inline-block;
	
	width:30px;
	height:30px;
	line-height:30px;
	font-weight:bold;
	font-family: Arial;
}
#lineContent .rowLine1 .rowbox .redcircle { background-color:red;color:white; }
#lineContent .rowLine1 .rowbox .greedcircle { background-color:green;color:white; }
#lineContent .rowLine1 .rowbox .graycircle { background-color:yellow;color:black; }


    /* linedetail section */
#linedetail .linedetailHeader ul { overflow:hidden;}
#linedetail .linedetailHeader ul li{ line-height: 50px; height:50px; background-color:rgba(230, 230, 230, 1); list-style-type:none; width:100%; border:1px solid #ccc; box-sizing:border-box;}
#linedetail .linedetailHeader select { width:auto; padding: 2px; margin: 0px; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 3); }
#linedetail .linedetailHeader img { z-index:2;position:absolute;float:left; margin:10px 10px 10px 10px;}

#linedetailContent ul { margin:0;padding:0;list-style:none; }
#linedetailContent ul li {position:relative;overflow:hidden;padding:5px;padding-bottom:5px;border-bottom: 1px solid rgb(189,215,238);}


#linedetailContent ul li div.step { padding-left:20px; }
#linedetailContent ul li div.step p {margin:0;}
#linedetailContent ul li div.step1 { display:block;float:right;margin-right:15px; min-width:120px;}
#linedetailContent ul li div.step1 p {margin:0;}
.col-md-1 .col-md-2 { position:relative; min-height:1px; padding-right:2px; padding-left:2px; }
.col-md-3 { position:relative; min-height:1px; padding-right:2px; padding-left:2px; float:left;width:50%;margin-bottom:5px; }
.row { margin-right:-15px; margin-left:-15px; margin-bottom:5px; }
.box1 { background-color:rgb(239, 239, 239) !important; border:1px solid green; position:relative; text-align:center; min-height:50px; vertical-align:middle; display:table;width:100% }
.box2 { background-color:#F5D0A9 !important; position:relative; text-align:center; min-height:20px; vertical-align:middle; display:table;width:100% }
.box3 { background-color:#9FF781 !important; position:relative; text-align:center; min-height:20px; vertical-align:middle; display:table;width:100% }
.box4 { background-color:#E3CEF6 !important; position:relative; text-align:center; min-height:20px; vertical-align:middle; display:table;width:100% }
.box5 { background-color:#CEF6F5 !important; position:relative; text-align:center; min-height:20px; vertical-align:middle; display:table;width:100% }
.boxdata { display:table-cell; text-align:center; vertical-align:middle; margin:0;}
.boxdata1 { font-weight:bold;color:green;font-size:25px;display:table-cell; text-align:center; vertical-align:middle; margin:0;}


#linedetailContent ul li .circle {
	border-radius: 50%; /* the magic */
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	text-align: center;
	display:inline-block;
	
	width:15px;
	height:15px;
	line-height:15px;
	font-weight:bold;
	font-family: Arial;
	float:left !important;
}
#linedetailContent ul li .redcircle { background-color: red; color:white;}
#linedetailContent ul li .greencircle { background-color: green;color:white; }
#linedetailContent ul li .graycircle { background-color: yellow;color:black; }

.titlebox { float:right; margin:-50px 10px 10px 10px; }
.titlebox .circle {
	border-radius: 50%; /* the magic */
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	text-align: center;
	display:inline-block;
	
	width:25px;
	height:25px;
	line-height:25px;
	font-weight:bold;
	font-family: Arial;
}
.titlebox .redcircle { background-color:red;color:white; }
.titlebox .greencircle { background-color:green;color:white; }
.titlebox .graycircle { background-color:yellow;color:black; }


.spinner-three-bounce { margin:100px;}



/* usersearch section */
#userMail{ width:100%; margin:0; padding:0px; }

#userMailHeader ul li{height:50px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; float:left; width:100%; text-align:center; border:1px solid #ccc; box-sizing:border-box; line-height:40px; }
#userMailHeader select { width:auto; padding: 2px; margin: 0px; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 3); }
#userMailHeader .sideNav { margin:0px; }
#userMailHeader img { position:relative;float:left; margin:4px 5px 10px 10px;}
#userMailHeader .noticeSelect { float:left; margin:5px 5px 10px 10px; }
#userMailHeader .sideTitle { width:20px;;height:20px;margin:5px; }

#userMailContent ul li { overflow:hidden;padding:5px;padding-bottom:5px;border-bottom: 1px solid rgb(189,215,238);}
#userMailContent .rowLine1 { padding-left:5px; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top:2px; margin-right:10px; }
#userMailContent .rowLine2 { margin-left:5px; min-width:0px; white-space:nowrap;line-height:25px; }
#userMailContent .rowLine2_1 { font-size:1em; line-height: 20px; }
#userMailContent .rowLine2_2 { font-size:1em;float:right;padding-right:10px; }
#userMailContent .rowLine2_3 { font-size:1em;}

/* usersearch section */
/* #userMail{ width:100%; margin:0; padding:0px; }

#userMailHeader ul li{height:50px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; float:left; width:100%; text-align:center; border:1px solid #ccc; box-sizing:border-box; line-height:40px; }
#userMailHeader select { width:auto; padding: 2px; margin: 0px; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 3); }
#userMailHeader .sideNav { margin:0px; }
#userMailHeader img { position:relative;float:left; margin:4px 5px 10px 10px;}
#userMailHeader .noticeSelect { float:left; margin:5px 5px 10px 10px; }
#userMailHeader .sideTitle { width:20px;;height:20px;margin:5px; }

#userMailContent ul li { overflow:hidden;padding:5px;padding-bottom:5px;border-bottom: 1px solid rgb(189,215,238);}
#userMailContent .rowLine1 { padding-left:5px; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top:2px; margin-right:10px; }
#userMailContent .rowLine2 { margin-left:5px; min-width:0px; white-space:nowrap;line-height:25px; }
#userMailContent .rowLine2_1 { font-size:1em; line-height: 20px; }
#userMailContent .rowLine2_2 { font-size:1em;float:right;padding-right:10px; }
#userMailContent .rowLine2_3 { font-size:1em;} */

.noti { color:#3483CA;line-height:35px;margin-left:10px;position: relative;bottom: 17%;font-size:1.3em;font-weight:bold; }
/* #noti { text-align:center;float:left;margin:0 auto;line-height:40px;font-size:1em;margin-left:10px; } */
/* #noti { color:#3483CA;line-height:35px;margin-left:10px;position: relative;bottom: 17%;font-size:1.3em;font-weight:bold; } */
#noti1 { text-align:center;float:left;margin:0 auto;line-height:35px;font-size:1em;margin-left:10px; }
.noti1 { text-align:center;float:left;margin:0 auto;line-height:35px !important;font-size:1em; }
/* .noti2 { text-align:center;float:right;margin:0 auto;line-height:38px;font-size:1em; } */
.noti2 { text-align:center;float:right;margin:0 auto;font-size:1em;height:40px; }


/* usersearch section */
#sendMail{ width:100%; margin:0; padding:0px; }
#sendMailHeader ul li{ height:50px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; float:left; width:100%; border:1px solid #ccc; box-sizing:border-box; line-height:40px; }
#sendMailHeader select { width:auto; padding: 2px; margin: 0px; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 3); }
#sendMailHeader img { position:relative;float:left; margin:5px 5px 10px 10px;}

#sendMailContent ul li { overflow:hidden;padding:5px;padding-bottom:5px;border-bottom: 1px solid rgb(189,215,238);}
.detailNoti1 { font-size:1.3em;line-height:35px; color:#3483CA;margin-left:10px;}



.apvbtn1 { margin: 0 auto; border-radius: 30px; background-color: #ffffcc; color: black; width:90px;height:35px; line-height:35px; border:1px solid #2985c5; padding:0; margin-right:5px; }
.apvbtn1 span { display: block; }


/* 결제 리스트 */
#apvcmplistHeader ul li{padding: 16px; background-color:rgba(230, 230, 230, 1); list-style-type:none; float:left; width:100%; border:1px solid #ccc; box-sizing:border-box; }
#apvcmplistHeader select { width:auto; padding: 2px; margin: 0px; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 3); }
#apvcmplistHeader img { position:relative;float:left; margin:-35px 10px 10px 10px;}

#apvcmplistContent ul li { padding:5px;}
#apvcmplistContent ul li { border-bottom: 1px solid rgb(189,215,238);}
#apvcmplistContent ul li:first-child { padding-top: 57px;}
#apvcmplistContent .rowLine1 { padding:0px 10px 0px 10px; }
#apvcmplistContent .rowLine1 ul { display: inline-block; float:right; }
#apvcmplistContent .rowLine1 ul li { display:inline-block; border:none; }
#apvcmplistContent .rowLine1 .rowbox { line-height:100%; float:right; }
#apvcmplistContent .rowLine1 .rowbox .circle {
	border-radius: 50%; /* the magic */
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	text-align: center;
	display:inline-block;
	color:rgba(105, 105, 105, 1);
	width:30px;
	height:30px;
	line-height:30px;
	font-weight:bold;
	font-family: Arial;
	margin-right:15px;
}


/* empsatisfy section */
#empsatisfy { width:100%; margin:0; padding:0px; }

#empsatisfyHeader ul li{height:50px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; float:left; width:100%; text-align:center; border:1px solid #ccc; box-sizing:border-box; line-height:40px; }
#empsatisfyHeader select { width:auto; padding: 2px; margin: 0px; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; border-radius: 4px; }
#empsatisfyHeader img { position:relative;float:left; margin:5px 5px 10px 10px;}
#empsatisfyHeader .noticeSelect { float:left; margin:5px 5px 10px 10px; }
.empsatisfynoti { text-align:center;float:right;margin:0 auto;line-height:37px;font-size:1em; }
#empsatisfyContent ul li { overflow:hidden;padding:5px;padding-bottom:5px;border-bottom: 1px solid rgb(189,215,238);}
#empsatisfyContent .rowLine1 { padding-left:5px; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top:2px; margin-right:10px; }
#empsatisfyContent .rowLine2 { margin-left:5px; min-width:0px; white-space:nowrap;line-height:25px; }
#empsatisfyContent .rowLine2 { margin-left:5px; min-width:0px;white-space:nowrap;line-height:25px; }
#empsatisfyContent .rowLine2_1 { font-size:1em;line-height: 20px;color:rgba(155, 156, 159, 1) !important; }
#empsatisfyContent .rowLine2_2 { font-size:1em;float:right;padding-right:10px;color:rgba(155, 156, 159, 1) !important;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* approvalProc section */
#empsatisfydetail{ width:100%; margin:0; padding:0px; }
#satisfydetailHeader ul li{height:50px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; float:left; width:100%; text-align:center; border:1px solid #ccc; box-sizing:border-box; line-height:40px; }
#satisfydetailHeader img { position:relative;float:left; margin:5px 5px 10px 10px;}
/* 
#empsatisfydetail { width:100%; margin:0; padding:0px; }
#empsatisfydetail .satisfydetailHeader ul li {height:50px; line-height:38px; padding:5px; background-color:rgba(230, 230, 230, 1); list-style-type:none; float:left; width:100%; border:1px solid #ccc; box-sizing:border-box; }
#empsatisfydetail .satisfydetailHeader img { position:relative;float:left; margin:-35px 5px 10px 10px;} */
#empsatisfydetail .detailInfo .detailtable { width:100%; border-bottom:1px solid #2985c5; border-collapse: collapse;}
#empsatisfydetail .detailInfo .detailthtd { border-bottom: 1px solid rgb(189,215,238); padding: 10px; }
#empsatisfydetail .detailInfo .detailthtd input[type=text] { width: 100%; display: inline-block; border:none;}
.empbtn { margin: 0 auto; border-radius: 30px; background-color: #ffffcc; color: black; width:50px;height:35px; line-height:35px; border:1px solid #2985c5; padding:0; margin-right:5px; }
.empbtn span { display: block; }


/* 결재 상세 테이블 용 */
table.blueTable { border: 1px solid #3BA8FF; width: 100%; text-align: left; border-collapse: collapse; }
table.blueTable td, table.blueTable th { border: 1px solid rgba(189, 215, 238, 1); padding: 3px 2px; min-width:85px; }
table.blueTable thead, table.blueTable tbody th { background: rgba(230, 230, 250, 1); }
table.blueTable thead th, table.blueTable thead tr, table.blueTable tbody th { text-align: center; font-weight: bold; }
.contxt  { border: solid 1px rgba(189, 215, 238, 1); }
.divisionline { border-collapse: collapse; border-bottom:2px solid black; }

i.material-icons {
	font-size: 35px !important;
	max-height: 35px !important;
	line-height: 35px !important; /* 수직 정렬을 위해 */
	overflow: hidden;
	display: inline-block;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
  }