body {padding:0; margin:0; width:100%; font-family:'Noto Sans KR',sans-serif;}
ul, li, a, input {padding:0; margin:0; text-decoration:none; list-style:none; color:inherit;}
textarea {font-family:'Noto Sans KR',sans-serif; height:100px;}
.clearbox {clear:both;}

/*---------------------------- HEADER BOX  ----------------------------*/
#header_box {box-sizing:border-box; width:100%; color:#fff; background-color:#3f51b5;}
#header_box:after {display:block; clear:both; content:"";}
#header_box .headerMain {width:100%;}
#header_box .headerMain .mainCenter {box-sizing:border-box; margin:0 auto; padding:10px; width:100%;}
#header_box .headerMain .mainCenter:after {display:block; clear:both; content:"";}
#header_box .headerMain .mainCenter .logo {float:left; padding:10px; cursor:pointer; transition:all 0.2s;}
#header_box .headerMain .mainCenter .logoutBtn {float:right; padding:10px; cursor:pointer; transition:all 0.2s;}
#header_box .headerMain .mainCenter .logoutBtn:hover {background-color:#303f9f;}


/*---------------------------- POPUP BOX  ----------------------------*/
#popupBox {display:none; position:fixed; width:100%; height:100%; z-index:2;}
#popupBox.active {display:block;}
#popupBox .popupBg {position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.6);}
#popupBox .contentsBox {display:table; position:absolute; top:0px; left:0px; width:100%; height:100%;}
#popupBox .contentsBox .dataBox {box-sizing:border-box; display:table-cell; width:100%; height:100%; vertical-align:middle;}
#popupBox .contentsBox .dataBox .centerBox {box-sizing:border-box; position:relative; margin:0 auto; padding:16px; width:90%; max-width:1000px; color:#000; background-color:#fff; border-radius:8px; box-shadow:4px 4px 20px 0 rgba(0,0,0,0.4);}
#popupBox .contentsBox .dataBox .centerBox .titleBox {box-sizing:border-box; position:relative; width:100%; height:60px; font-size:24px;}
#popupBox .contentsBox .dataBox .centerBox .titleBox .title {padding:10px; font-weight:bold;}
#popupBox .contentsBox .dataBox .centerBox .titleBox .closeX {position:absolute; top:0; right:0; cursor:pointer;}

#popupBox .contentsBox .dataBox .centerBox .infoBox {box-sizing:border-box; position:relative; padding:20px 10px; width:100%; height:600px; background-color:rgb(250, 250, 250); overflow-y:scroll;}
#popupBox .contentsBox .dataBox .centerBox .infoBox:has(ul.bg_cp) {background-color:rgba(255,95,84,0.04);}
#popupBox .contentsBox .dataBox .centerBox .infoBox:has(ul.bg_smst) {background-color:rgba(45,215,111,0.04);}
#popupBox .contentsBox .infoBox > ul {width:100%; font-size:14px;}
#popupBox .contentsBox .infoBox > ul:after {display:block; clear:both; content:"";}
#popupBox .contentsBox .infoBox > ul > li {float:left; margin-bottom:10px; width:100%;}
#popupBox .contentsBox .infoBox > ul > li .tit {box-sizing:border-box; float:left; display:block; padding:8px 8px;width:150px; height:100%;}
#popupBox .contentsBox .infoBox > ul > li .con {float:left; display:block; width:calc(50% - 150px); height:100%;}
#popupBox .contentsBox .infoBox > ul > li .con .inp {box-sizing:border-box; padding:10px; width:100%; border:1px solid #ccc;}

#popupBox .contentsBox .infoBox ul .titleBar {float:left; display:block; margin:10px 10px 10px 10px; width:calc(100% - 20px); font-weight:bold;}
#popupBox .contentsBox .infoBox ul .paragraphBar {float:left; display:block; margin:10px 10px 20px 10px; width:calc(100% - 20px); border-bottom:1px solid #ccc;}

#popupBox .contentsBox .infoBox ul li .detailTit {margin:0 10px 10px 0; text-align:center; background-color:#eee; border-radius:4px; cursor:pointer; transition:all 0.2s;}
#popupBox .contentsBox .infoBox ul li .detailTit:hover {background-color:#ccc;}
#popupBox .contentsBox .infoBox ul li .detailTit.active {color:#fff; background-color:#007bff;}
ul.detailDataTable li {margin:0; text-align:center; border-bottom:1px solid #ccc;}
ul.detailDataTable li:after {display:block; clear:both; content:"";}
ul.detailDataTable li > span {box-sizing:border-box; float:left; padding:10px; min-width:100px;}

#popupBox .contentsBox .infoBox ul li .saveBtn {display:inline-block; margin:10px; padding:10px 20px; color:#fff; background-color:#3f51b5; border-radius:4px; cursor:pointer; transition:all 0.2s;}
#popupBox .contentsBox .infoBox ul li .saveBtn:hover {background-color:#303f9f;}


/*---------------------------- FOOTER BOX  ----------------------------*/
#footer_box {box-sizing:border-box; padding-top:4px; width:100%; border-top:1px solid #ccc;}
#footer_box .footerCenter {margin:0 auto; width:1280px;}
#footer_box .footerCenter ul.subNavBox {width:100%;}
#footer_box .footerCenter ul.subNavBox:after {display:block; clear:both; content:"";}
#footer_box .footerCenter ul.subNavBox li {float:left; padding:10px;}
#footer_box .footerCenter .footerMain {width:100%;}
#footer_box .footerCenter .footerMain:after {display:block; clear:both; content:"";}
#footer_box .footerCenter .footerMain .leftArea, 
#footer_box .footerCenter .footerMain .midArea, 
#footer_box .footerCenter .footerMain .rightArea {float:left; height:160px;}
#footer_box .footerCenter .footerMain .leftArea {width:20%; text-align:center;}
#footer_box .footerCenter .footerMain .leftArea .logoBox {margin:0 auto; width:216px; height:54px;}
#footer_box .footerCenter .footerMain .midArea {width:50%; font-size:14px;}
#footer_box .footerCenter .footerMain .rightArea {box-sizing:border-box; padding:10px; width:30%;}
#footer_box .footerCenter .footerMain .rightArea .serviceBox {box-sizing:border-box; padding:10px; width:100%; height:100%; font-size:12px; background-color:#eee;}
#footer_box .footerCenter .footerMain .rightArea .serviceBox div {margin-bottom:4px;}
#footer_box .footerCenter .footerMain .rightArea .serviceBox div:nth-child(1) {margin-bottom:10px;}
#footer_box .footerCenter .footerMain .rightArea .serviceBox .svcTit {font-size:14px; font-weight:bold;}


/*---------------------------- LOGIN BOX  ----------------------------*/
#loginBox {box-sizing:border-box; width:100%; height:100vh;}
#loginBox .loginCenter {box-sizing:border-box; display:table; margin:0 auto; width:100%; max-width:500px; height:100%;}
#loginBox .loginCenter .loginFormBox {display:table-cell; width:100%; height:100%; vertical-align:middle;}
#loginBox .loginCenter .loginFormBox .inpBox {box-sizing:border-box; margin-bottom:10px; padding:8px; width:100%; height:50px; font-size:16px; border:1px solid #ccc; border-radius:4px;}
#loginBox .loginCenter .loginFormBox .loginBtn {text-align:center; font-weight:bold; color:#fff; background-color:#3f51b5; cursor:pointer;}


/*---------------------------- LEFT MENU  ----------------------------*/
.totalBox {width:100%; min-height:calc(100vh - 70px);}
.totalBox:after {display:block; clear:both; content:"";}
.totalBox .leftMenu {float:left; width:240px; height:calc(100vh - 70px); background-color:#eee;}
.totalBox .leftMenu > ul {width:100%; height:100%; overflow-y:scroll;}
.totalBox .leftMenu > ul li {box-sizing:border-box; padding:10px; width:100%;}
.totalBox .leftMenu > ul li.active {font-weight:bold; color:#3f51b5; background-color:rgba(255,255,255,0.6);}
.totalBox .leftMenu > ul li:hover {color:#3f51b5; font-weight:bold;}
.totalBox .leftMenu > ul li a {display:block; width:100%; height:100%;}
.totalBox .leftMenu > ul .menuBar {display:block; margin:10px; width:calc(100% - 20px); border-bottom:1px solid #ccc;}


/*---------------------------- BOARD BOX  ----------------------------*/
.totalBox .boardBox {box-sizing:border-box; float:right; padding:10px; width:calc(100% - 240px); height:calc(100vh - 70px); overflow-y:scroll;}
.totalBox .boardBox .boardTitle {margin-bottom:30px; width:100%; font-size:20px; font-weight:bold;}
.totalBox .boardBox .searchBox {box-sizing:border-box; padding:20px 0; width:100%;}
.totalBox .boardBox .searchBox:after {display:block; clear:both; content:"";}
.totalBox .boardBox .searchBox .searchSel {box-sizing:border-box; float:left; padding:4px; width:120px; height:40px; border:1px solid #ccc; border-radius:8px;}
.totalBox .boardBox .searchBox .searchTxt {box-sizing:border-box; float:left; padding:10px; width:400px; height:40px; border:1px solid #ccc; border-radius:8px;}
.totalBox .boardBox .searchBox .searchBtn {box-sizing:border-box; float:left; padding:8px; min-width:100px; height:40px; text-align:center; color:#fff; background-color:#3f51b5; border-radius:8px; cursor:pointer; transition:all 0.2s;}
.totalBox .boardBox .searchBox .searchBtn:hover {background-color:#303f9f;}
.totalBox .boardBox .searchBox .addBtn {box-sizing:border-box; float:right; padding:8px; min-width:100px; height:40px; text-align:center; color:#fff; background-color:#3f51b5; cursor:pointer; transition:all 0.2s;}
.totalBox .boardBox .searchBox .addBtn:hover {background-color:#303f9f;}
.totalBox .boardBox ul.dataTable {box-sizing:border-box; width:100%; font-size:14px; border:1px solid #ccc;}
.totalBox .boardBox ul.dataTable > li {box-sizing:border-box; display:table; width:100%; text-align:center; border-bottom:1px solid #ccc;}
.totalBox .boardBox ul.dataTable > li:last-child {border-bottom:none;}
.totalBox .boardBox ul.dataTable > li:not(.tit):hover {background-color:#eee;}
.totalBox .boardBox ul.dataTable > li > span {box-sizing:border-box; display:table-cell; padding:10px 2px; vertical-align:middle;}

.totalBox .boardBox ul.dataTable .mk_cp, .totalBox .boardBox ul.dataTable .mk_smst {box-sizing:border-box; display:inline-block; width:42px; height:42px; color:#fff; border-radius:10px;}
.totalBox .boardBox ul.dataTable .mk_cp {padding:10px 6px; font-size:14px; background-color:#ff5f54;}
.totalBox .boardBox ul.dataTable .mk_smst {padding:3px 2px; font-size:12px; background-color:#2dd76f;}

/***** board paging *****/
.boardBox ul.pagingBox {box-sizing:border-box; margin-top:20px; width:100%; text-align:center;}
.boardBox ul.pagingBox li {box-sizing:border-box; display:inline; margin:4px; font-size:14px; color:#fff; background-color:#a8c1d5; border-radius:4px; cursor:pointer;}
.boardBox ul.pagingBox li.on {background-color:#3f51b5;}
@media screen and (min-width:1001px) {
	.boardBox ul.pagingBox li {padding:4px 12px;}
}
@media screen and (max-width:1000px) {
	.boardBox ul.pagingBox li {padding:2px 8px;}
}