@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

@charset "utf-8";

/* reset.css */
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,address,dl,dt,dd,ol,ul,li,fieldset,form,legend,table,caption,tbody,tfoot,thead,tr,th,td,input,select,textarea{margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,fieldset{border:0px;}
table{border-collapse:collapse;}
th{font-weight: 600;}
ul,ol,li{list-style:none;}
address,em{font-style:normal;}
li img,object{vertical-align:top;}
input,select,textarea,form img{vertical-align:middle; font-size: 12px;}
select{height: 24px; line-height: 24px;}
input,select{border: 1px solid #ccc;}
a{outline:0; text-decoration:none; border:none; color: #444; font-size: 12px;}
body{font:12px/20px "nanumgothic"; color:#444; background:#fff;}

.pdt60{padding-top: 60px !important;}
.pdb30{padding-bottom: 30px !important;}

.mgl10{margin-left: 10px !important;}
.mgl50{margin-left: 50px !important;}
.mgt0{margin-top: 0 !important;}
.mgt5{margin-top: 5px !important;}
.mgt15{margin-top: 15px !important;}
.mgt30{margin-top: 30px !important;}
.mgt50{margin-top: 50px !important;}
.mgt60{margin-top: 60px !important;}
.mgt65{margin-top: 65px !important;}
.mgt70{margin-top: 70px !important;}
.mgt75{margin-top: 75px !important;}
.mgt80{margin-top: 80px !important;}
.mgt85{margin-top: 85px !important;}
.mgb10{margin-bottom: 10px !important;}

.fl{float: left;}
.fr{float: right;}

.tal{text-align: left !important;}
.tar{text-align: right !important;}
.tac{text-align: center !important;}

/*-----header-----*/
#header{width: 100%; height: 70px; line-height: 70px; text-align: center; display: block; border-bottom: 1px solid #e5e5e5;}
#header>h1>a{height: 70px; line-height: 70px; display: block;}
#header>h1>a>img{width: 280px; height: 49px; vertical-align: middle;}


/*-----main-----*/
#menu{width: 100%; display: block;}
#menu>ul{width: 100%; height: 148px; overflow: hidden; margin-top: 10px;}
#menu>ul>li{float: left; width: 50%; display: block;}
#menu>ul>li>a{width: 95%;/*width: 157px;*/ height: 148px; display: block; margin: 0 auto; text-align: center;}
#menu>ul>li>a.c1{background: #c34c50;}
#menu>ul>li>a.c2{background: #b9784e;}
#menu>ul>li>a.c3{background: #f27241;}
#menu>ul>li>a.c4{background: #e66f69;}
#menu>ul>li>a>img{width: 157px; height: 148px;}

/*-----sub-----*/
#title{width: 100%; border-bottom: 1px solid #ccc; box-sizing: border-box; padding: 10px 10px 7px 10px; overflow: hidden; display: block;}
#title>a{float: left; margin-top: 4px;}
#title>a>img{width: 17px; height: 18px;}
#title>h2{float: left; font: 600 18px/1.5 "nanumsquare"; color: #333; margin-left: 5px;}
#contents{width: 100%; display: block;}
#contents>p{box-sizing: border-box; padding: 10px; border-bottom: 1px solid #e5e5e5;}
#contents>ul.list>li{border-bottom: 1px solid #e5e5e5;}
#contents>ul.list>li>a{font: normal 12px/1.2 "nanum gothic"; color: #444; box-sizing: border-box; padding: 10px; display: block;}
#contents>ul.list>li>a>span{font: normal 11px/1.2 "nanum gothic"; color: #aaa; margin-top: 5px; display: block;}
#contents>ul.list>li>a>span.finish{background: #525252; color: #fff; padding: 5px; display: inline-block;}
#contents>ul.list>li>a>span.wait{background: #b7b7b7; color: #fff; padding: 5px; display: inline-block;}
#contents>ul.list>li>a>span.apply{background: #c34c50; color: #fff; padding: 5px; display: inline-block;}

#contents>ul.list>li>div.listView{box-sizing: border-box; padding: 10px; background: #eee; font: normal 12px/1.5 "nanum gothic"; color: #444; background: #f9f9f9;}
#contents>ul.list>li>div.listView>a{width: 70px; background: #c34c50; color: #fff; padding: 10px 0; text-align: center; margin: 15px auto 0 auto; display: block;}
#contents>ul.list>li>div.listView>p>span{font-size: 12px;}

#contents>ul.list>li>div.listView>div.file{margin-top: 10px;}
#contents>ul.list>li>div.listView>div.file>a{color: #ca2621; text-decoration: underline;}

#contents>.write{width: 100%;}
#contents>.write th{text-align: left; padding: 10px; border-bottom: 1px solid #e5e5e5; width: 80px; font-weight: 600;}
#contents>.write td{padding: 10px; border-bottom: 1px solid #e5e5e5;}
#contents>.write td>input[type=text]{height: 25px; line-height: 25px; padding: 0 5px;}
#contents>.write td>input[type=email]{height: 25px; line-height: 25px; padding: 0 5px;}
#contents>.write td>input[type=tel]{height: 25px; line-height: 25px; padding: 0 5px;}
#contents>.write td>input[type=password]{height: 25px; line-height: 25px; padding: 0 5px;}
#contents>.write td>input[type=number]{height: 25px; line-height: 25px; padding: 0 5px;}
#contents>.write td>input[type=date]{height: 25px; line-height: 25px; padding: 0 5px;}
#contents>.write td>input[type=datetime]{height: 25px; line-height: 25px; padding: 0 5px;}
#contents>.write td>input[type=month]{height: 25px; line-height: 25px; padding: 0 5px;}
#contents>.write td>input[type=search]{height: 25px; line-height: 25px; padding: 0 5px;}
#contents>.write td>input[type=color]{height: 25px; line-height: 25px; padding: 0 5px;}
#contents>.write td>input[type=range]{height: 25px; line-height: 25px; padding: 0 5px;}
#contents>.write td>select{height: 27px; line-height: 27px; margin-top: -1px;}
#contents>.write td>span{font-size: 12px; color: #f27241;}
#contents>.write td>a{font-size: 12px; color: #fff; text-align: center; background: #d9b79e; height: 27px; line-height: 27px; padding: 0 10px; display: inline-block;}
#contents>.write td>a.btnEdit{font-size: 11px; text-align: center; height: 15px; line-height: 15px; color: #fff; padding: 5px; background: #8498b3; border-radius: 3px;}
#contents>.write td>a.btnBill{font-size: 11px; text-align: center; height: 15px; line-height: 15px; color: #fff; padding: 5px; background: #42c9cf; border-radius: 3px;}
#contents>.write td>a.btnReceipt{font-size: 11px; text-align: center; height: 15px; line-height: 15px; color: #fff; padding: 5px; background: #7e65c1; border-radius: 3px;}
#contents>.addPerson{width: 100%; margin-top: 10px; overflow: hidden; display: block;}
#contents>.addPerson>li{border-bottom: none; float: left; padding: 0 10px;}
#contents>.addPerson>li>span{color: #f27241;}
#contents>.addPerson>li>a{margin-left: 10px; display: inline-block;}

#contents>.contBtn{width: 100%; text-align: center; margin-top: 10px;}
#contents>.contBtn a{width: 60px; height: 30px; line-height: 30px; color: #fff; background: #594f4f; display: inline-block;}

#contents>.cont{box-sizing: border-box; padding: 10px;}
#contents>.cont>h3{font: 600 12px/1.2 "nanum gothic"; color: #c34c50; margin-top: 10px;}

#contents>ul>a.more{width: 70px; height: 30px; line-height: 30px; background: #aaa; color: #fff; text-align: center; margin: 10px auto; display: block;}

p.noti{color: #f27241 !important;}
p.noti>a.goNow{background: #f27241; color: #fff; padding: 5px 10px; font-size: 11px;}



/*login*/
.login{box-sizing: border-box; padding: 20px;}
.login li{text-align: center;}
.login li+li{margin-top: 10px;}
.login input{width: 94%; height: 25px; padding: 2%; text-indent: 30px;}
.login input.id{background: url(../img/login_id.png) 10px 11px no-repeat;}
.login input.pw{background: url(../img/login_password.png) 10px 11px no-repeat;}
.login a{width: 99%; height: 40px; background: #333; line-height: 40px; text-align: center; color: #fff; display: block; margin: 0 auto;}


.logininfo{box-sizing: border-box; padding: 10px 26px; font-size: 14px; line-height: 24px;}

/*-----footer-----*/
#footer{width: 100%; height: 24px; line-height: 24px; font-size: 11px; color: #333; text-align: center; margin-top: 10px; display: block;}
#footer a{display: inline-block; width: 70px; height: 15px; line-height: 15px; text-align: center;}
#footer a+a{border-left: 1px solid #eee;}
#footer img{margin-top: 2px;}