@charset "utf-8";

/* 작성자: 황희진(grigo0704@naver.com) / 작성일: 2020년 10월 21일  / 버전 0.4 */



/* RESET */
* { padding: 0; margin: 0; border: 0; outline: 0; box-sizing: border-box; }
html { width: 100%; height: 100%; -webkit-text-size-adjust: none; }
body { width: 100%; height: 100%; font: normal 14px/120% 'Nanum Square', 'Malgun Gothic', sans-serif; }
h1, h2, h3, h4, h5, h6 { display: inline-block; font-family: 'Nanum Square', 'Malgun Gothic', sans-serif; }
i, em, address { font-style: normal; }
input, select, textarea, button, label { font-family: inherit; font-size: 100%; vertical-align: middle; outline: none; -webkit-appearance: none; }
input::-webkit-inner-spin-button { display: none; }
input::-webkit-clear-button { display: none; }
input::-ms-clear { display: none; }
textarea { resize: none; }
label { cursor: pointer; }
fieldset, img, iframe { border: none; }
img { vertical-align: top; outline: none; }
a { color: inherit; text-decoration: none; }
menu, li { list-style: none; }
button { font-family: inherit; padding: 0; margin: 0; border: 0; cursor: pointer; vertical-align: middle; background: none; }
caption { width: 0; height: 0; font-size: 0; line-height: 0; overflow: hidden; visibility: hidden; }
hr { display: none; }
table { width: 100%; border-spacing: 0; border-collapse: collapse; }
th, td { text-align: left; }
mark { background: none; }

:focus { outline: 0; }
::before { box-sizing: border-box; }
::after { box-sizing: border-box; }

::-webkit-input-placeholder { /* WebKit browsers */ color:#b0b0b0; font: normal 12px/100% 'Malgun Gothic', sans-serif; text-transform:none; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#b0b0b0; font: normal 12px/100% 'Malgun Gothic', sans-serif; text-transform:none; opacity:1; filter: alpha(opacity=100); }
::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#b0b0b0; font: normal 12px/100% 'Malgun Gothic', sans-serif; text-transform:none; opacity:1; filter: alpha(opacity=100); }
:-ms-input-placeholder { /* Internet Explorer 10+ */ color:#b0b0b0; font: normal 12px/100% 'Malgun Gothic', sans-serif; text-transform:none; }


.hide { display: none !important; }
.wrap { display: block; width: 100%; height: 100%; }
.inner { display: block; width: 1200px; margin: 0 auto; }











/************************************** BUTTON **************************************/

.btTxt { display: inline-block; overflow: hidden; height: 40px; color: #fff; font: 400 14px/40px 'Nanum Square'; text-shadow: 0 0 3px rgba(0,0,0,0.5); text-align: center; border: 1px solid rgba(0,0,0,0.3); border-radius: 3px; background-color: #0484ff; padding: 0 15px; vertical-align: middle; }

.btHome { display: block; overflow: hidden; width: 40px; height: 40px; border-radius: 50%; background: #0484ff url("/resources/img/ico_home.png") no-repeat center 50%; background-size: 20px; text-indent: -9999px; box-shadow: 0 3px 5px rgba(0,0,0,0.5); }

.btUser { display: block; overflow: hidden; width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%; background: rgba(0,0,0,0.3) url("/resources/img/ico_user.png") no-repeat center 50%; background-size: 20px; box-shadow: 0 5px 3px rgba(0,0,0,0.3); vertical-align: middle; }
.btUser img { width: 100%; height: 100%; }

.btDay { display: block; overflow: hidden; width: 35px; height: 35px; font-size: 0; background:  url("/resources/img/ico_date_w.png") no-repeat center 50%; text-indent: -9999px; opacity: 0.5; }

.btClose { display: inline-block; overflow: hidden; width: 40px; height: 40px; background: none; }
.btClose i { position: relative; display: block; overflow: visible; width: 100%; height: 100%; text-indent: -9999px; }
.btClose i:before { position: absolute; left: 50%; top: 50%; margin-top: -7.5px; content: ""; display: block; width: 1px; height: 15px; background-color: #fff; transform: rotate(45deg); transform-origin: 50% 50%; }
.btClose i:after { position: absolute; left: 50%; top: 50%; margin-top: -7.5px; content: ""; display: block; width: 1px; height: 15px; background-color: #fff; transform: rotate(-45deg); transform-origin: 50% 50%; }

.btFind { display: inline-block; overflow: hidden; width: 40px; height: 40px; background: none; padding: 5px; }
.btFind i { position: relative; display: block; width: 30px; height: 30px; text-indent: -9999px; }
.btFind i::before { position: absolute; top: 7px; left: 7px; content: ""; display: block; overflow: hidden; width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; }
.btFind i::after { position: absolute; bottom: 6px; left: 20px; content: ""; display: block; overflow: hidden; width: 2px; height: 7px; background-color: #fff; transform: rotate(-45deg); }

.btNext { display: inline-block; overflow: hidden; height: 40px; text-align: center; font-size: 0; vertical-align: middle; }
.btNext i { position: relative; display: inline-block; overflow: visible; height: 40px; color: #fff; font: 700 12px/40px 'Nanum Square', 'Malgun Gothic'; padding-right: 15px; }
.btNext i::before { position: absolute; right: 0; top: 50%; margin-top: -4px; content: ""; display: block; overflow: hidden; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }

.btPrev { display: inline-block; overflow: hidden; height: 40px; text-align: center; font-size: 0;  vertical-align: middle;}
.btPrev i { position: relative; display: inline-block; overflow: visible; height: 40px; color: #fff; font: 700 12px/40px 'Nanum Square', 'Malgun Gothic'; padding-left: 15px; }
.btPrev i::before { position: absolute; left: 0; top: 50%; margin-top: -4px; content: ""; display: block; overflow: hidden; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-135deg); }

.btOrder { display: inline-block; overflow: hidden; height: 40px; line-height: 40px; color: #fff; font-size: 12px; font-weight: bold; background: #808080 url("/resources/img/ico_date_w.png") no-repeat 10px 50%; padding: 0 10px 0 35px; }

.btReset { display: inline-block; overflow: hidden; height: 40px; line-height: 40px; color: #fff; font-size: 12px; font-weight: bold; background: #808080 url("/resources/img/ico_reset_wt.png") no-repeat 10px 50%; background-size: 15px; padding: 0 10px 0 30px; }


/************************************** FORM **************************************/

.textarea { display: block; overflow-x: hidden; overflow-y: scroll; width: 100%; height: 100px; color: #000; font-size: 12px; text-align: left; border: 1px solid rgba(0,0,0,0.3); border-radius: 3px; background-color: #fff; vertical-align: middle; padding: 10px; }

/* INPUT */
.input { display: inline-block; overflow: visible; height: 35px; vertical-align: middle; }
.input input { display: block; width: 100%; height: 100%; line-height: 35px; color: #fff; font-size: 12px; text-align: left; border: 1px solid rgba(0,0,0,0.1); border-radius: 3px; background-color: rgba(0,0,0,0.3); padding: 0 10px; }
.input input:-ms-input-placeholder { color:#b0b0b0; }
.input input:focus { background-color: rgba(0,0,0,0.5); }
.input input[readonly] { background-color: #f0f0f0; }
.input input[disabled] { background-color: #f0f0f0; }
.input .txt { display: inline-block; overflow: hidden; float: left; height: 35px; color: #fff; font: 400 12px/35px 'Nanum Square'; padding: 0 10px; }

.input.date { position: relative; overflow: hidden; }
.input.date input { display: inline-block; float: left; width: 130px; padding-right: 35px; }
.input.date .btDay { position: absolute; top: 0; left: 95px; }
.input.date .btDay:nth-of-type(2) { left: auto; right: 0; }
.input.date .select { float: left; margin: 0; }
.input.date .select > label { border-left: 0; border-right: 0; border-radius: 0; }

/* <--20201014 */
.input.file { position: relative; overflow: hidden; }
.input.file input { position: absolute; top: 0; bottom: 0; right: 0; left: -100px; z-index: 5; width: auto; cursor: pointer; opacity: 0; }
.input.file label { position: relative; display: block; overflow: hidden; width: 100%; height: 35px; line-height: 35px; color: #fff; font-size: 12px; text-align: left; white-space: nowrap; text-overflow: ellipsis; border: 1px solid rgba(0,0,0,0.1); border-radius: 3px; background-color: rgba(0,0,0,0.3); padding: 0 5px 0 85px; }
.input.file label::before { position: absolute; left: 2px; top: 2px; content: "파일선택"; display: block; overflow: hidden; width: 70px; height: 29px; color: #fff; font: 400 12px/29px 'Nanum Square'; text-align: center; border-radius: 3px; background-color: #505050; }
/* 20201014--> */

/* SELECT */
.select { position: relative; display: inline-block; overflow: hidden; height: 35px; vertical-align: middle; }
.select select { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: block; width: 100%; height: 100%; line-height: 40px; color: #505050; font-size: 12px; padding: 0 10px; opacity: 0; }
.select label { position: relative; display: block; overflow: hidden; width: 100%; height: 35px; line-height: 35px; text-align: left; color: #fff; font-size: 12px; letter-spacing: -1px; border: 1px solid rgba(0,0,0,0.1); border-radius: 3px; background-color: rgba(0,0,0,0.3); padding: 0 30px 0 10px; }
.select label::before { position: absolute; right: 10px; top: 50%; margin-top: -3px; content: ""; display: block; overflow: hidden; width: 0; height: 0; border: 3px solid transparent; border-top: 5px solid #fff; }

/* <--20201014 */
/* CHECK */
.check { position: relative; display: inline-block; height: 35px; vertical-align: middle; margin: 5px; }
.check input { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 5; display: block; width: 100%; height: 100%; opacity: 0; }
.check label { position: relative; display: block; overflow: hidden; height: 35px; line-height: 36px; color: #fff; font-size: 12px; text-align: left; padding: 0 15px 0 25px; transition: all 0.3s ease; }
.check label::before { position: absolute; left: 3px; top: 50%; margin-top: -5px; z-index: 2; content: ""; display: block; overflow: hidden; width: 10px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(135deg); opacity: 0.5; transition: all 0.3s ease; }
.check label::after { position: absolute; left: 0; top: 50%; margin-top: -8px; z-index: 1; content: ""; display: block; width: 15px; height: 15px; border-radius: 2px; background-color: rgba(256,256,256,0.1); box-sizing: border-box; transition: all 0.3s ease; }
.check input:checked ~ label { color: #000; font-weight: 700; }
.check input:checked ~ label::before { opacity: 1; }
.check input:checked ~ label::after { border-color: rgba(0,0,0,0.3); background-color: #0484ff; }
.check input:disabled ~ label { opacity: 0.5; }
/* 20201014--> */

/* CHECK/SET */
.checkSet { display: inline-block; overflow: hidden; height: 35px; vertical-align: middle; }
.checkSet .check { float: left; margin: 0; }
.checkSet .check label { line-height: 33px; color: rgba(256,256,256,0.3); border: 1px solid rgba(0,0,0,0.1); background-color: rgba(0,0,0,0.3); padding: 0 15px; }
.checkSet .check label::before,
.checkSet .check label::after { display: none; }
.checkSet .check:first-of-type label { border-radius: 3px 0 0 3px; }
.checkSet .check:last-of-type label { border-radius: 0 3px 3px 0; }
.checkSet .check input:checked ~ label { color: #fff; background-color: #000; }
.checkSet .check input:checked ~ label::before,
.checkSet .check input:checked ~ label::after { display: none; }




/************************************** UNIT **************************************/

/* TOOL */
.tool { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: block; overflow: visible; width: 40px; height: 40px; }
.tool::before { position: absolute; bottom: 0; right: 0; z-index: 10; content: ""; display: block; overflow: hidden; width: 40px; height: 40px; border-radius: 50%; background: #0484ff url("/resources/img/ico_tool.png") no-repeat center 50%; background-size: 20px; text-indent: -9999px; box-shadow: 0 3px 5px rgba(0,0,0,0.5); }
.tool .btFind { border: 1px solid rgba(0,0,0,0.1); border-radius: 50%; background-color: #0484ff; padding: 4px; box-shadow: 0 3px 5px rgba(0,0,0,0.5); }
.tool li { position: absolute; bottom: 0; right: 0; display: block; overflow: visible; width: 40px; height: 40px; opacity: 0; transition: all 0.3s; }
.tool.on::before { background-color: #505050; background-image: url("/resources/img/ico_x.png"); }
.tool.on li { opacity: 1; }
.tool.on li:nth-of-type(1) { bottom: 50px; }
.tool.on li:nth-of-type(2) { bottom: 100px; }

/* COLOR */
.color { display: inline-block; overflow: hidden; font-size: 0; text-align: left; }
.color i { display: inline-block; overflow: hidden; color: rgba(256,256,256,0.5); font-size: 12px; padding: 0 10px; vertical-align: middle; }
.color i::before { content: ""; display: inline-block; overflow: hidden; width: 10px; height: 10px; border: 1px solid #000; background-color: rgba(0,0,0,0.1); vertical-align: text-top; margin: 1px 5px 0 0; }
.color i.c1::before { border-color: #FF0000; }
.color i.c2::before { border-color: #FF0000; background-color: #FF0000; }
.color i.c3::before { border-color: #0000FF; }
.color i.c4::before { border-color: #0000FF; background-color: #0000FF; }
.color i.c5::before { border-color: #00FF00; background-color: #00FF00; }
.color i.c6::before { border-color: #00FFFF; background-color: #00FFFF; }

/* SEARCH */
.search { position: relative; display: block; overflow: hidden; width: 100%; border: 1px solid rgba(256,256,256,0.1); border-radius: 2px; background-color: rgba(256,256,256,0.3); padding: 20px; padding-right: 150px; margin-bottom: 20px; }
.search .br { display: block; clear: both; }
.search .tit { position: relative; display: inline-block; float: left; height: 35px; color: #fff; font: 700 12px/35px 'Nanum Square'; word-break: keep-all; text-align: left; border-bottom: 1px solid #fff; padding: 0 15px; margin-left: 30px; }
.search .tit::before { position: absolute; left: 0; top: 16px; content: ""; display: block; overflow: hidden; width: 3px; height: 3px; background-color: #fff; }
.search .tit::after { position: absolute; right: 0; top: 50%; margin-top: -6px; content: ""; display: block; width: 1px; height: 12px; background-color: rgba(256,256,256,0.2); }
.search .tit:first-of-type { margin: 0; }
.search .select { float: left; }
.search .select label { color: #fff; border: 0; border-bottom: 1px solid #fff; border-radius: 0; background: none; }
.search .select label::before { border-top: 5px solid #fff; }
.search .input { float: left; border-bottom: 1px solid #fff; }
.search .input input { border: 0; border-radius: 0; background: none; }
.search .btFind { position: absolute; right: 15px; bottom: 15px; width: 100px; border-radius: 3px; background-color: #303030; padding: 0; }
.search .btFind i { display: inline-block; width: auto; line-height: 30px; color: #fff; font-size: 12px; font-weight: 700; text-indent: 0; padding: 0 10px 0 30px; }
.search .btFind i::before { width: 12px; height: 12px; }
.search .btFind i::after { bottom: 8px; left: 18px; }


/* TABLE */
.table { clear: both; border-top: 2px solid #000; border-bottom: 1px solid #000; }
.table th { text-align: center; color: #fff; font-size: 12px; padding: 10px; background-color: rgba(0,0,0,0.3); }
.table td { text-align: center; color: #808080; font-size: 12px; padding: 5px 10px; border-top: 1px solid rgba(0,0,0,0.3); background-color: #fff; }
.table td.tl { text-align: left; }
.table td p { height: 35px; line-height: 35px; }
.table td .btTxt { display: block; width: 100%; height: 35px; line-height: 35px; font-size: 12px;order: 1px solid rgba(0,0,0,0.2); padding: 0 10px; box-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
.table td .btDocu { height: 35px; line-height: 34px; background-color: #808080; }
.table td .btDocu.bd { color: #808080; border-color: #808080; background-color: #fff; background-image: url("/resources/img/ico_docu_bk.png"); }
.table tbody th { border-top: 1px solid rgba(0,0,0,0.3); }

.table td .btTxt.b { background-color: #8f9cb5; border: 1px solid rgba(0,0,0,0.1); }
.table td .btTxt.c { background-color: #fff; color: #121212; border: 1px solid #7fbaca; text-shadow: 0 0 0;} /* 20170478 - 20200819 */

/* PAGES */
.pages { clear: both; display: block; overflow: hidden; width: 100%; text-align: center; font-size: 0; padding-top: 30px; }
.pages .pgNum { display: inline-block; overflow: hidden; width: 40px; height: 40px; line-height: 42px; text-align: center; color: #fff; font-size: 12px; font-weight: 700; border: 1px solid rgba(256,256,256,0.1); border-right: 0; background-color: rgba(256,256,256,0.3); vertical-align: middle; }
.pages .pgNum:hover { background-color: rgba(256,256,256,0.2); }
.pages .pgNum.on { color: #000; font-weight: 900; background-color: #fff; }
.pages .btNext { width: 40px; border: 1px solid rgba(256,256,256,0.1); border-radius: 0 3px 3px 0; background-color: rgba(256,256,256,0.3); }
.pages .btNext i { overflow: hidden; width: 40px; padding-right: 0; text-indent: -9999px; }
.pages .btNext i:before { right: 50%; margin-right: -3px; }
.pages .btNext:hover { background-color: rgba(256,256,256,0.2); }
.pages .btPrev { width: 40px; border: 1px solid rgba(256,256,256,0.1); border-radius: 3px 0 0 3px; background-color: rgba(256,256,256,0.3); }
.pages .btPrev i { overflow: hidden; width: 40px; padding-left: 0; text-indent: -9999px; }
.pages .btPrev i:before { left: 50%; margin-left: -3px; }
.pages .btPrev:hover { background-color: rgba(256,256,256,0.2); }
.pages .btPrev + .pgNum { border-left: 0; }



/* MONTH *
.month { display: inline-block; overflow: visible; }
.month p { display: inline-block; float: left; height: 40px; color: #505050; font: 20px/40px 'Tahoma'; padding: 0 20px; }
.month .btPrev { float: left; }
.month .btPrev i::before { border-color: #000; }
.month .btNext { float: right; }
.month .btNext i::before { border-color: #000; }

/* VERSION *
.version { display: inline-block; }
.version .ver { display: inline-block; overflow: hidden; float: left; width: 40px; height: 40px; border: 1px solid #d0d0d0; text-indent: -9999px; }
.version .ver.m { border-right: 0; border-radius: 3px 0 0 3px; background: #f5f5f5 url("/resources/img/bt_calender_m.png") no-repeat center 50%; background-size: 25px; }
.version .ver.m.on { background-image: url("/resources/img/bt_calender_m_on.png"); }
.version .ver.w { border-left: 0; border-radius: 0 3px 3px 0; background: #f5f5f5 url("/resources/img/bt_calender_w.png") no-repeat center 50%; background-size: 25px; }
.version .ver.w.on { background-image: url("/resources/img/bt_calender_w_on.png"); }
.version .ver.on { color: #fff; border: 1px solid rgba(0,0,0,0.5); background-color: #505050; }

/* CALENDER *
.calendar { position: relative; display: block; overflow: hidden; width: 100%; height: 100%; padding-top: 30px; }

.calendar .week { position: absolute; top: 0; left: 0; right: 0; z-index: 1; display: block; overflow: hidden; border-bottom: 1px solid #505050; background-color: #fff; }
.calendar .week i { position: relative; display: inline-block; overflow: hidden; float: left; width: calc(100% / 7); height: 30px; color: #909090; font: bold 11px/30px 'Tahoma'; letter-spacing: 1px; text-align: center; }
.calendar .week i::before { position: absolute; top: 50%; margin-top: -5px; left: 0; content: ""; display: block; width: 1px; height: 10px; background-color: #d0d0d0; }
.calendar .week i:first-of-type { color: #ff3248; }
.calendar .week i:first-of-type::before { display: none; }
.calendar .week i:last-of-type { color: #0484ff; }

.calendar .more { position: absolute; top: 5px; right: 0; display: inline-block; overflow: hidden; height: 30px; color: #b0b0b0; font: 11px/30px 'Tahoma'; padding: 0 10px; }

.calendar > ul { display: block; overflow: hidden; width: 100%; height: 100%; border-top: 1px solid #efefef; background-color: #f9f9f9; }
.calendar > ul::before { content: ""; display: none; float: left; width: calc(100% / 7); height: calc(100% / 5); border-right: 1px solid #efefef; border-bottom: 1px solid #efefef; }
.calendar > ul > li { position: relative; display: inline-block; float: left; width: calc(100% / 7); height: calc(100% / 5); border-right: 1px solid #efefef; border-bottom: 1px solid #efefef; background-color: #fff; padding-top: 35px; }
.calendar > ul > li::before { position: absolute; top: 5px; left: 5px; content: ""; display: block; overflow: hidden; width: 30px; height: 30px; color: #808080; font: 11px/30px 'Tahoma'; letter-spacing: 1px; text-align: center; border-radius: 50%; }
.calendar > ul > li::after { position: absolute; top: 0; left: 0; right: -1px; bottom: -1px; content: ""; display: none; width: auto; height: auto; border: 1px solid #b0b0b0; }
.calendar > ul > li:hover::after { display: block; }
.calendar > ul > li:nth-of-type(1)::before { content: "1"; }
.calendar > ul > li:nth-of-type(2)::before { content: "2"; }
.calendar > ul > li:nth-of-type(3)::before { content: "3"; }
.calendar > ul > li:nth-of-type(4)::before { content: "4"; }
.calendar > ul > li:nth-of-type(5)::before { content: "5"; }
.calendar > ul > li:nth-of-type(6)::before { content: "6"; }
.calendar > ul > li:nth-of-type(7)::before { content: "7"; }
.calendar > ul > li:nth-of-type(8)::before { content: "8"; }
.calendar > ul > li:nth-of-type(9)::before { content: "9"; }
.calendar > ul > li:nth-of-type(10)::before { content: "10"; }
.calendar > ul > li:nth-of-type(11)::before { content: "11"; }
.calendar > ul > li:nth-of-type(12)::before { content: "12"; }
.calendar > ul > li:nth-of-type(13)::before { content: "13"; }
.calendar > ul > li:nth-of-type(14)::before { content: "14"; }
.calendar > ul > li:nth-of-type(15)::before { content: "15"; }
.calendar > ul > li:nth-of-type(16)::before { content: "16"; }
.calendar > ul > li:nth-of-type(17)::before { content: "17"; }
.calendar > ul > li:nth-of-type(18)::before { content: "18"; }
.calendar > ul > li:nth-of-type(19)::before { content: "19"; }
.calendar > ul > li:nth-of-type(20)::before { content: "20"; }
.calendar > ul > li:nth-of-type(21)::before { content: "21"; }
.calendar > ul > li:nth-of-type(22)::before { content: "22"; }
.calendar > ul > li:nth-of-type(23)::before { content: "23"; }
.calendar > ul > li:nth-of-type(24)::before { content: "24"; }
.calendar > ul > li:nth-of-type(25)::before { content: "25"; }
.calendar > ul > li:nth-of-type(26)::before { content: "26"; }
.calendar > ul > li:nth-of-type(27)::before { content: "27"; }
.calendar > ul > li:nth-of-type(28)::before { content: "28"; }
.calendar > ul > li:nth-of-type(29)::before { content: "29"; }
.calendar > ul > li:nth-of-type(30)::before { content: "30"; }
.calendar > ul > li:nth-of-type(31)::before { content: "31"; }
.calendar > ul > li.today::before { color: #fff !important; font-weight: 900; text-shadow: 0 0 3px rgba(0,0,0,0.3); background-color: #f9b000; }
.calendar > ul > li.on::before { color: #fff !important; font-weight: 900; text-shadow: 0 0 3px rgba(0,0,0,0.3); background-color: #505050; }

.calendar > ul.ex::before { height: calc(100% / 6); }
.calendar > ul.ex > li { height: calc(100% / 6); }

.calendar ul.type0 > li:nth-of-type(7n + 1)::before { color: #ff3248; }
.calendar ul.type0 > li:nth-of-type(7n)::before { color: #0484ff; border-right: 0; }
.calendar ul.type0 > li:nth-of-type(28) ~ li { border-bottom: 0; }

.calendar ul.type1::before { display: inline-block; }
.calendar ul.type1 > li:nth-of-type(7n)::before { color: #ff3248; }
.calendar ul.type1 > li:nth-of-type(7n - 1)::before { color: #0484ff; border-right: 0; }
.calendar ul.type1 > li:nth-of-type(27) ~ li { border-bottom: 0; }

.calendar ul.type2::before { display: inline-block; width: calc(100% / 7 * 2); }
.calendar ul.type2 > li:nth-of-type(7n - 1)::before { color: #ff3248; }
.calendar ul.type2 > li:nth-of-type(7n - 2)::before { color: #0484ff; border-right: 0; }
.calendar ul.type2 > li:nth-of-type(26) ~ li { border-bottom: 0; }

.calendar ul.type3::before { display: inline-block; width: calc(100% / 7 * 3); }
.calendar ul.type3 > li:nth-of-type(7n - 2)::before { color: #ff3248; }
.calendar ul.type3 > li:nth-of-type(7n - 3)::before { color: #0484ff; border-right: 0; }
.calendar ul.type3 > li:nth-of-type(25) ~ li { border-bottom: 0; }

.calendar ul.type4::before { display: inline-block; width: calc(100% / 7 * 4); }
.calendar ul.type4 > li:nth-of-type(7n - 3)::before { color: #ff3248; }
.calendar ul.type4 > li:nth-of-type(7n - 4)::before { color: #0484ff; border-right: 0; }
.calendar ul.type4 > li:nth-of-type(24) ~ li { border-bottom: 0; }

.calendar ul.type5::before { display: inline-block; width: calc(100% / 7 * 5); }
.calendar ul.type5 > li:nth-of-type(7n - 4)::before { color: #ff3248; }
.calendar ul.type5 > li:nth-of-type(7n - 5)::before { color: #0484ff; border-right: 0; }
.calendar ul.type5 > li:nth-of-type(30) ~ li { border-bottom: 0; }

.calendar ul.type6::before { display: inline-block; width: calc(100% / 7 * 6); }
.calendar ul.type6 > li:nth-of-type(7n - 5)::before { color: #ff3248; }
.calendar ul.type6 > li:nth-of-type(7n - 6)::before { color: #0484ff; border-right: 0; }
.calendar ul.type6 > li:nth-of-type(29) ~ li { border-bottom: 0; }

.calendar ol { display: block; }
.calendar ol > li { display: block; margin-top: 2px; }
.calendar ol > li .task { display: block; overflow: hidden; width: 100%; background-color: #b0b0b0; padding-left: 5px; }
.calendar ol > li .task p { display: block; overflow: hidden; width: 100%; height: 20px; color: #505050; font: 12px/20px 'Noto Sans KR'; text-align: left; text-overflow: ellipsis; white-space: nowrap; background-color: #fff; padding: 0 10px; }
.calendar ol > li .task i { display: none; }
.calendar ol > li .task.color1 { background-color: #37d8ad; }
.calendar ol > li .task.color2 { background-color: #50bde3; }
.calendar ol > li .task.color3 { background-color: #7292ed; }
.calendar ol > li:nth-of-type(5) ~ li { display: none; }



.calendar.col { padding-top: 0; }
.calendar.col .week,
.calendar.col .more { display: none; }
.calendar.col > ul { display: flex; }
.calendar.col > ul::before { display: none; }
.calendar.col > ul > li { flex: 1; display: inline-block; width: calc(100% / 31); height: 100%; padding-top: 40px; border-bottom: 0; }
.calendar.col > ul > li::before { left: 50%; margin-left: -15px; }
.calendar.col > ul > li:hover { background-color: #f9f9f9; }
.calendar.col > ul > li:hover::after { display: none; }
.calendar.col > ul > li.on { background-color: #f9f9f9; }
.calendar.col ol { position: relative; width: 100%; height: 100%; }
.calendar.col ol > li { position: absolute; left: 0; width: 100%; height: 40px; margin: 0; }
.calendar.col ol > li .task { position: relative; height: 100%; overflow: visible; padding: 0; background: none; }
.calendar.col ol > li .task p { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; color: #fff; background: #b0b0b0; padding: 0; padding-left: 40px; }
.calendar.col ol > li .task i { position: absolute; top: 0; left: 0; display: inline-block; width: 40px; height: 20px; color: #fff; font: 11px/20px 'Tahoma'; text-align: left; padding-left: 5px; opacity: 0.5; }
.calendar.col ol > li .task.color1 p { background-color: #37d8ad; }
.calendar.col ol > li .task.color2 p { background-color: #50bde3; }
.calendar.col ol > li .task.color3 p { background-color: #7292ed; }
.calendar.col ol > li .task.day2 p { width: calc(100% * 2 + 2px); }
.calendar.col ol > li .task.day3 p { width: calc(100% * 3 + 3px); }
.calendar.col ol > li .task.day4 p { width: calc(100% * 4 + 4px); }
.calendar.col ol > li .task.day5 p { width: calc(100% * 5 + 5px); }
.calendar.col ol > li .task.day6 p { width: calc(100% * 6 + 6px); }
.calendar.col ol > li .task.day7 p { width: calc(100% * 7 + 7px); }
.calendar.col ol > li .task.day8 p { width: calc(100% * 8 + 8px); }
.calendar.col ol > li .task.day9 p { width: calc(100% * 9 + 9px); }
.calendar.col ol > li .task.day10 p { width: calc(100% * 10 + 10px); }
.calendar.col ol > li.no1 { top: 0; }
.calendar.col ol > li.no2 { top: calc(40px * 2); }
.calendar.col ol > li.no3 { top: calc(40px * 3); }
.calendar.col ol > li.no4 { top: calc(40px * 4); }
.calendar.col ol > li.no5 { top: calc(40px * 5); }
.calendar.col ol > li.no6 { top: calc(40px * 6); }
.calendar.col ol > li.no7 { top: calc(40px * 7); }
.calendar.col ol > li.no8 { top: calc(40px * 8); }
.calendar.col ol > li.no9 { top: calc(40px * 9); }
.calendar.col ol > li.no10 { top: calc(40px * 10); }
.calendar.col ol > li.no11 { top: calc(40px * 11); }
.calendar.col ol > li:nth-of-type(5) ~ li { display: block; }


.calendar.on .w { display: none; }
.calendar.on ul:before { display: none; }
.calendar.on li { display: block; overflow: hidden; float: none; width: 100%; height: auto; border: 0; border-top: 1px solid #efefef; padding: 10px; padding-left: 0; }
.calendar.on li:first-of-type { border: 0; }
.calendar.on li:before { display: inline-block; float: left; width: 20%; }

.calendar.on .cast { float: right; width: 80%; }
.calendar.on .cast p { display: inline-block; float: left; width: 75%; text-align: left; padding: 3px 10px; }
.calendar.on .cast p:first-of-type { width: 25%; text-align: center; padding: 3px; }
.calendar.on .cast ~ .cast { margin-top: 2px; }

.calendar.on .task { float: right; width: 80%; }
.calendar.on .task p { padding: 2px 10px; }
.calendar.on .task i { padding: 2px 10px; }

.calendar.on .more { display: none; }
.calendar.on .more ~ .cast { display: block; }
.calendar.on .more ~ .task { display: block; }









/************************************** RAYOUT **************************************/

/* HEADING */
h1 { display: inline-block; overflow: hidden; width: 200px; height: 40px; background: url("/resources/img/ci_w.png") no-repeat left 50%; background-size: contain; text-indent: -9999px; }
h1 a { display: block; width: 100%; height: 100%; }

h2 { display: block; overflow: hidden; width: 250px; height: 100px; background: url("/resources/img/bi_w.png") no-repeat left 50%; background-size: contain; text-indent: -9999px; }

h3 { display: block; overflow: visible; color: #fff; font-weight: 500; font-size: 30px; letter-spacing: -2px; line-height: 120%; text-align: left; text-shadow: 0 0 5px rgba(0,0,0,0.5); margin-bottom: 20px; }
h3 i { display: block; font-size: 50px; letter-spacing: -4px; line-height: 120%; }
h3 + p { display: block; overflow: visible; color: #fff; font-size: 12px; line-height: 120%; text-shadow: 0 0 5px rgba(0,0,0,0.5); padding-top: 10px; }

h5 { display: block; overflow: visible; color: #fff; font-weight: 500; font-size: 20px; line-height: 120%; text-shadow: 0 0 5px rgba(0,0,0,0.5); }


/* HEADER *
header { position: fixed; top: 0; left: 0; bottom: 0; z-index: 500; display: block; overflow: visible; width: 60px; height: 100%; border-right: 1px solid rgba(0,0,0,0.2); background-color: #004f98; }
header h1 { width: 100%; height: 60px; border-bottom: 1px solid rgba(0,0,0,0.1); background: rgba(0,0,0,0.1) url("/resources/img/ico_home.png") no-repeat center 50%; background-size: 30px; }
header .wrap { position: relative; }
header .btUser { float: right; }
header .btGnb { float: left; }
header .btGnb ~ h1 { display: none; }



/* GNB */
nav.gnb { display: block; overflow: visible; font-size: 0; }
nav.gnb .mm { position: relative; display: block; overflow: hidden; width: 100%; height: 100%; color: #44546a; font: 700 18px 'Nanum Square'; letter-spacing: -1px; text-align: center; background: #fff; padding: 30px 0 300px 0; box-shadow: 0 0 5px #000; transition: all 0.3s ease; }
nav.gnb .mm::before { position: absolute; bottom: 0; left: 0; right: 0; content: ""; display: block; width: 100%; height: 280px; }
nav.gnb .mm i { display: block; color: #b0b0b0; font: 14px/100% 'Tahoma'; font-variant: small-caps; letter-spacing: 1px; padding-top: 5px; }
nav.gnb .mm:hover { transform: scale(1.1,1.1); }
nav.gnb ul { display: inline-block; overflow: visible; width: 900px; } /* 20201029 overflow: hidden; */
nav.gnb li { position: relative; display: inline-block; overflow: visible; float: left; width: 20%; padding: 10px; } /* 20201029 overflow: hidden; */
nav.gnb li:nth-of-type(1) .mm::before { background: url("/resources/img/sample_thumb_01.jpg") no-repeat center 50%; background-size: cover; }
nav.gnb li:nth-of-type(2) .mm::before { background: url("/resources/img/sample_thumb_02.jpg") no-repeat center 50%; background-size: cover; }
nav.gnb li:nth-of-type(3) .mm::before { background: url("/resources/img/sample_thumb_03.jpg") no-repeat center 50%; background-size: cover; }
nav.gnb li:nth-of-type(4) .mm::before { background: url("/resources/img/sample_thumb_04.jpg") no-repeat center 50%; background-size: cover; }
nav.gnb li:nth-of-type(5) .mm::before { background: url("/resources/img/sample_thumb_05.jpg") no-repeat center 50%; background-size: cover; }








/************************************** ARTICLE **************************************/

/* FILTER */
article.filter { position: fixed; bottom: -250px; left: 0; right: 0; z-index: 300; display: block; overflow: hidden; width: 100%; background-color: #505050; box-shadow: 0 0 3px rgba(0,0,0,0.3); transition: all 0.3s ease; }
article.filter .wrap { position: relative; padding: 20px; }
article.filter .btClose { position: absolute; top: 10px; right: 10px; }
article.filter .btFind { position: absolute; right: 20px; bottom: 25px; width: 100px; height: 35px; border-radius: 3px; background-color: #0484ff; padding: 0; }
article.filter .btFind i { display: inline-block; width: auto; line-height: 28px; color: #fff; font-size: 12px; font-weight: 700; text-indent: 0; padding: 2px 10px 0 30px; }
article.filter .btFind i::before { width: 12px; height: 12px; }
article.filter .btFind i::after { bottom: 8px; left: 18px; }
article.filter .color { float: left; margin: 10px 0 0 20px; }
article.filter h5 { float: left; margin-bottom: 10px; }
article.filter ul { clear: both; display: block; overflow: hidden; width: 100%; border-top: 1px solid rgba(0,0,0,0.2); padding: 15px 100px 0 0; }
article.filter li { display: inline-block; overflow: hidden; float: left; padding: 5px 50px 5px 0; }
article.filter li .tit { position: relative; display: inline-block; float: left; height: 35px; line-height: 35px; color: #fff; font-size: 14px; padding: 0 20px 0 10px; }
article.filter li .tit::before { position: absolute; left: 0; top: 50%; margin-top: -1.5px; content: ""; display: block; overflow: hidden; width: 3px; height: 3px; background-color: #fff; }
article.filter li .input { float: left; }
article.filter li .input ~ .select { float: left; margin-left: 5px; }

article.filter.up { bottom: 0; }

/* <--20201014 */
/* POPUP */
article.popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 900; display: table; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); }
article.popup .wrap { position: relative; display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; padding: 20px; }
article.popup .btClose { position: absolute; top: 50px; right: 50px; }

article.popup .popBox { position: relative; display: inline-block; overflow: hidden; text-align: center; border-radius: 3px; background-color: #fff; padding: 20px; padding-top: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin: auto; animation: popupBox 0.3s ease forwards; }
@keyframes popupBox { from { margin-top: 100px; opacity: 0; } to { margin-top: 0; opacity: 1; } }
article.popup .popBox .btClose { top: 10px; right: 10px; }
article.popup .popBox .btClose i:before,
article.popup .popBox .btClose i:after { background-color: #000; }
article.popup .popBox h6 { display: block; color: #505050; font-size: 20px; font-weight: 700; line-height: 24px; text-align: left; padding: 10px 50px 10px 0; }
article.popup .popBox h6 + p { padding-top: 0; }
article.popup .popBox p { display: block; color: #707070; font-size: 12px; line-height: 16px; text-align: left; padding: 10px 0; }

article.popup .popBox .input { display: block; margin: 0; margin-bottom: 10px; }
article.popup .popBox .input input { color: #000; font: 14px/35px 'Tahoma'; background-color: #fff; }
article.popup .popBox .input input:focus { border-color: rgba(0,0,0,0.5); }
article.popup .popBox .input label { color: #000; background-color: #fff; }
article.popup .popBox .input.file { width: 250px; }

article.popup .popBox .check label { color: #505050; }
article.popup .popBox .check label::after { background-color: #d0d0d0; }
article.popup .popBox .check input:checked ~ label::after { border-color: rgba(0,0,0,0.3); background-color: #0484ff; }

article.popup .popBox .tap { height: 40px; }
article.popup .popBox .tap li i { height: 40px; line-height: 40px; font-size: 13px; border-bottom: 1px solid #505050; padding: 0 20px; }
article.popup .popBox .tap li.on i { color: #000; border: 1px solid #505050; border-bottom: 0; }

article.popup .popBox .scroll { display: block; overflow-x: hidden; overflow-y: scroll; max-width: 800px; height: 200px; color: #505050; font-size: 13px; line-height: 150%; text-align: left; border: 1px solid rgba(0,0,0,0.1); background-color: #f9f9f9; padding: 20px; }

article.popup .popBox .btns { clear: both; width: 100%; }
article.popup .popBox .btns .btTxt:first-child { background-color: #b0b0b0; }
/* 20201014--> */

/* TIMELINE *
article.timeline { position: fixed; top: 0; bottom: 0; right: 0; z-index: 300; display: block; overflow: hidden; width: 300px; height: 100%; background-color: #505050; box-shadow: 0 0 3px rgba(0,0,0,0.3); animation: timeline 0.3s forwards; }
@keyframes timeline { from { right: -300px} to { right: 0; } }
article.timeline .wrap { position: relative; overflow-x: hidden; overflow-y: auto; padding: 60px 30px 220px 30px; }
article.timeline .btClose { position: absolute; top: 0; right: 0; }
article.timeline h5 { position: absolute; top: 0; left: 0; font-size: 20px; padding: 20px; }
article.timeline ul { position: relative; display: block; overflow: visible; width: 100%; height: 100%; border-left: 1px solid rgba(256,256,256,0.1); padding-bottom: 50px; }
article.timeline ul::before { position: absolute; top: 0; left: -5px; content: ""; display: block; width: 10px; height: 20px; background-color: #505050; }
article.timeline li { display: block; width: 100%; padding: 10px 0; }
article.timeline li i { position: relative; display: block; height: 20px; color: #b0b0b0; font: 11px/20px 'Tahoma'; text-align: left; padding: 0 10px; }
article.timeline li i::before { position: absolute; top: 8px; left: -3px; content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; border: 1px solid #808080; background-color: #505050; }
article.timeline li .task { position: relative; display: block; color: #fff; font-size: 13px; text-align: left; padding: 10px; padding-top: 0; }

article.timeline .add { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; padding: 20px; }
article.timeline .add .select { display: block; width: 100%; }
article.timeline .add .select label { border-color: #000; }
article.timeline .add .input { display: block; width: 100%; margin: 3px 0; }
article.timeline .add .input input { border-color: #000; }
article.timeline .add .textarea { border-color: #000; }
article.timeline .add .btTxt { display: block; width: 100%; margin-top: 5px; }

article.pgk { display: inline-block; width: 940px; height: 600px; border-radius: 3px; background-color: rgba(256,256,256,0.5); padding: 30px; }





/************************************** SECTION **************************************/

section { position: relative; display: table; overflow: hidden; width: 100%; height: 100%; }
section > .wrap { position: relative; display: table-cell; text-align: center; vertical-align: middle; }


/* LOGIN */
section.login { background-color: #354d63; }
section.login h1 { position: absolute; top: 50px; left: 50px; z-index: 20; }

section.login .loginBox { position: fixed; top: 45%; left: 55%; z-index: 20; display: block; width: 300px; animation: loginBox 1s ease forwards; }
@keyframes loginBox { from { opacity: 0; margin-top: 100px; } to { opacity: 1; margin-top: 0; } }
section.login .loginBox h2 { padding-bottom: 30px; }
section.login .loginBox .loginForm { position: relative; display: block; overflow: visible; width: 100%; }
section.login .loginBox .loginForm input { display: block; width: 100%; height: 40px; color: #202020; font: 14px/40px 'Tahoma'; letter-spacing: 2px; padding-left: 50px; }
section.login .loginBox .loginForm input[type="text"] { border-radius: 3px 3px 0 0; background: #fff url("/resources/img/ico_user_bk.png") no-repeat 15px 50%; background-size: 20px; }
section.login .loginBox .loginForm input[type="password"] { border-radius: 0 0 3px 3px; background: #fff url("/resources/img/ico_lock_bk.png") no-repeat 15px 50%; background-size: 20px; margin-top: 1px; }

section.login .loginBox .btLogin { position: relative; display: block; width: 100%; height: 50px; color: #fff; font: 400 16px/50px 'Nanum Square', 'Malgun Gothic'; text-align: center; text-shadow: 0 0 3px rgba(0,0,0,0.5); border-radius: 3px; background-color: #0484ff; box-shadow: 1px 1px 3px rgba(0,0,0,0.3); padding-right: 30px; margin: 10px 0; }
section.login .loginBox .btLogin::before { position: absolute; top: 0; right: 0; bottom: 0; content: ""; display: block; overflow: hidden; width: 50px; height: 50px; background: rgba(0,0,0,0.3) url("/resources/img/ico_arrow.png") no-repeat center 50%; background-size: 20px; opacity: 0.7; }
section.login .loginBox .btPw { position: relative; display: inline-block; height: 40px; line-height: 40px; color: #fff; font-size: 12px; padding-left: 20px; }
section.login .loginBox .btPw::before { position: absolute; left: 0; top: 50%; margin-top: -8px; content: "!"; display: block; overflow: hidden; width: 14px; height: 14px; color: #fff; font: 10px/13px 'Tahoma'; text-align: center; border-radius: 50%; background-color: rgba(256,256,256,0.2); }

section.login .loginBox .check { margin: 0; margin-top: 5px; }
section.login .loginBox .check label { color: #fff; }

section.login .visual { display: block; overflow: hidden; width: 100%; height: 100%; }
section.login .visual ul { position: relative; display: block; overflow: hidden; width: 100%; height: 100%; }
section.login .visual li { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; overflow: hidden; width: 100%; height: 100%; text-indent: -9999px; opacity: 0; }
section.login .visual li.on { opacity: 1; animation: visual 1s ease forwards; }
@keyframes visual { from { opacity: 0; } to { opacity: 1; } }

/* <--20201014 */
section.login .pwBox { position: fixed; top: 30%; left: 55%; z-index: 20; display: block; width: 300px; animation: pwBox 1s ease forwards; }
@keyframes pwBox { from { opacity: 0; margin-top: 100px; } to { opacity: 1; margin-top: 0; } }
section.login .pwBox .pwForm { position: relative; display: block; overflow: visible; width: 100%; }
section.login .pwBox .pwForm h3 { font-size: 24px; }
section.login .pwBox .pwForm input[type="password"],
section.login .pwBox .pwForm input[type="text"] { display: block; width: 100%; height: 35px; color: #202020; font: 14px/35px 'Tahoma'; letter-spacing: 2px; border-radius: 3px; background-color: #fff; padding: 0 10px; margin-bottom: 5px; }
section.login .pwBox .pwForm p { clear: both; width: 100%; height: 50px; color: #fff; font-size: 12px; line-height: 14px; text-shadow: 0 0 5px rgba(0,0,0,0.5); text-align: left; }
section.login .pwBox .btGo { position: relative; display: inline-block; height: 40px; line-height: 40px; color: #fff; font-size: 12px; padding-left: 20px; margin-top: 10px; }
section.login .pwBox .btGo::before { position: absolute; left: 0; top: 50%; margin-top: -8px; content: ""; display: block; overflow: hidden; width: 14px; height: 14px; color: #fff; font: 10px/13px 'Tahoma'; text-align: center; border-radius: 50%; background-color: rgba(256,256,256,0.2); }
section.login .pwBox .btGo::after { position: absolute; left: 5px; top: 50%; margin-top: -4px; content: ""; display: block; overflow: hidden; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-135deg); }
section.login .pwBox .btTxt { display: block; width: 100%; font-size: 14px; text-shadow: 0 0 3px rgba(0,0,0,0.3); border: 0; box-shadow: 3px 3px 3px rgba(0,0,0,0.3); }
section.login .pwBox .agree { display: block; }
section.login .pwBox .agree .check { display: block; margin: 0; }
section.login .pwBox .agree .check label { color: #fff; }
section.login .pwBox .number { display: block; border-top: 1px solid rgba(256,256,256,0.2); padding-bottom: 10px; margin-top: 20px; }
section.login .pwBox .number p { height: 35px; line-height: 35px; }
section.login .pwBox .number input[type="text"] { display: inline-block; float: left; width: 60%; height: 40px; line-height: 40px; border: 2px solid #7292ed; border-right: 0; border-radius: 3px 0 0 3px; margin: 0; }
section.login .pwBox .number .btTxt { display: inline-block; float: right; width: 40%; border-radius: 0 3px 3px 0; background-color: #7292ed; box-shadow: none; padding: 0; }
/* 20201014--> */


/* MAIN */
section.main { background: url("/resources/img/bg_visual.jpg") no-repeat center 50%; background-size: cover; }
section.main h1 { position: absolute; top: 50px; left: 50px; }
section.main h2 { width: 300px; margin: 0 auto 30px auto; }
/* <--20201014 */
section.main .user { position: absolute; top: 50px; right: 50px; display: block; }
section.main .user .btUser { float: right; }
section.main .user p { display: block; float: left; height: 40px; color: #fff; line-height: 100%; text-align: right; padding: 5px 10px 0 0; }
section.main .user i { display: block; font-size: 12px; padding-top: 3px; opacity: 0.3; }
section.main .user ul { position: absolute; top: 100%; right: 0; display: none; overflow: hidden; min-width: 100%; border-radius: 3px; background-color: #fff; padding: 5px 10px; box-shadow: 0 3px 5px rgba(0,0,0,0.5); }
section.main .user li { display: block; overflow: hidden; }
section.main .user li .bt { display: block; overflow: hidden; width: 100%; height: 35px; line-height: 35px; color: #808080; font-size: 12px; text-align: left; padding: 0 10px; }
section.main .user.on::before { position: absolute; bottom: 0; right: 15px; content: ""; display: block; width: 0; height: 0; border: 5px solid transparent; border-bottom: 5px solid #fff; }
section.main .user.on ul { display: block; }
/* 20201014--> */

/* <--20201021 */
section.main .siteInfo { position: relative; display: block; overflow: hidden; width: 880px; border: 1px solid rgba(256,256,256,0.2); border-radius: 3px; background: rgba(0,0,0,0.2) url("../img/bg_siteinfo.png") no-repeat 20px 50%; background-size: 70px; padding: 20px 0; padding-left: 120px; margin: 0 auto 10px auto; }
section.main .siteInfo::before { position: absolute; left: 105px; top: 23px; bottom: 21px; content: ""; display: block; width: 1px; height: auto; background-color: #fff; opacity: 0.1; }
section.main .siteInfo::after { position: absolute; right: 25px; top: 50%; margin-top: -9px; content: ""; display: block; width: 20px; height: 20px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
section.main .siteInfo p { display: block; color: #fff; font-size: 18px; font-weight: bold; text-align: left; padding: 5px 0; }
section.main .siteInfo ul { display: block; overflow: hidden; font-size: 0; text-align: left; }
section.main .siteInfo li { display: inline-block; overflow: hidden; float: left; color: #fff; font-size: 14px; padding-top: 10px; margin-right: 50px; }
section.main .siteInfo li i { position: relative; display: inline-block; padding-right: 20px; }
section.main .siteInfo li i::after { position: absolute; right: 9px; top: 3px; content: ""; display: block; width: 1px; height: 10px; background-color: #fff; opacity: 0.2; }
section.main .siteInfo:hover { border-color: #fff; background-color: rgba(0,0,0,0.5); }
/* 20201021--> */

section.main .pages { padding-bottom: 30px; }/*20201102*/


/* SCHEDULE */
section.schedule { position: relative; }
section.schedule .control { display: block; height: 60px; border-bottom: 1px solid #505050; padding: 10px; }
section.schedule .control .month { float: left; }
section.schedule .control .version { float: right; }
section.schedule .calendar { height: calc(100% - 60px); }
section.schedule .btns { position: absolute; top: 10px; left: auto; z-index: 100; }
section.schedule .btns.left { left: 10px; }
section.schedule .btns.right { right: 200px; }
section.schedule .btns .btTxt { float: left; }
section.schedule .btns .btTxt ~ .btTxt { margin-left: 5px; }
section.schedule .btns .btHome { float: left; border: 1px solid rgba(0,0,0,0.2); border-radius: 3px 0 0 3px; background-color: #808080; box-shadow: none; }
section.schedule .btns .btFind { float: left; border: 1px solid rgba(0,0,0,0.2); border-left: 0; background-color: #808080; padding: 4px; }
section.schedule .btns .btFind i::before { top: 8px; left: 8px; width: 11px; height: 11px; }
section.schedule .btns .btFind i::after { bottom: 7px; left: 18px; }
section.schedule .btns .btOrder { float: left; border: 1px solid rgba(0,0,0,0.2); border-left: 0; }
section.schedule .btns .btReset { border: 1px solid rgba(0,0,0,0.2); border-left: 0; border-radius: 0 3px 3px 0; }

/* 20220425 공사관리 일정변경요청 */
.fc_sky {color: skyblue!important;}
.fc_red {color: red!important;}
.fc_blue {color: #0000FF!important;}
section.workspace h3 { height: 50px; line-height: 51px; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 0; text-align: left; border-bottom: 1px solid rgba(0,0,0,0.3); padding-left: 30px; }
section.workspace .content { display: block; overflow: hidden; width: 100%; max-width: 1500px; text-align: center; padding: 50px; }
section.workspace { background: url("../img/bg_check.png") no-repeat 80% 50%; }
section.workspace > .wrap { text-align: left; vertical-align: top; background: rgba(0,0,0,0.6) url("../img/bg_dot.png"); padding-left: 70px; }
.table { clear: both; border-top: 2px solid #000; border-bottom: 1px solid #000; }
.table th { text-align: center; color: #fff; font-size: 12px; padding: 10px; background-color: rgba(0,0,0,0.3); }
.table td { height: 40px; text-align: center; color: #808080; font-size: 12px; padding: 5px 10px; border-top: 1px solid rgba(0,0,0,0.3); background-color: #fff; }
.btns {margin-top: 1em;}
.btnArea {margin-top: 10px;text-align: right;}
.btRch {display: inline-block; overflow: hidden; height: 40px; color: #fff; font: 700 12px/40px 'Nanum Square'; text-shadow: 0 0 3px rgba(0,0,0,0.5); text-align: center; border-radius: 3px; background-color: #7fbaca; padding: 0 15px; vertical-align: middle; }
.btSch {display: inline-block; overflow: hidden; height: 40px; color: #fff; font: 700 12px/40px 'Nanum Square'; text-shadow: 0 0 3px rgba(0,0,0,0.5); text-align: center; border-radius: 3px; background-color: #7fbaca; padding: 0 15px; vertical-align: middle;border: 1px solid rgba(0,0,0,0.2);}
.btRes {display: inline-block; overflow: hidden; height: 40px; color: #fff; font: 700 12px/40px 'Nanum Square'; text-shadow: 0 0 3px rgba(0,0,0,0.5); text-align: center; border-radius: 3px; background-color: #44546a; padding: 0 15px; vertical-align: middle;border: 1px solid rgba(0,0,0,0.2);}
.table td a.btSmt { display: block; width: 100%; height: 35px; line-height: 35px; font-size: 12px;border: 1px solid rgba(0,0,0,0.2); padding: 0 10px; box-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
.popBox .reschedule h5 { display: inline-block; float: left; width: 15%; height: 35px; line-height: 37px; color: #fff; font-size: 1em; letter-spacing: 0; text-align: center; border-radius: 3px 3px 0 0; background-color: #44546a; margin-right: 15px; margin-top: 30px; }
.popBox .reschedule .input {width: 100%;display: flex!important;justify-content: start;margin-top: 10px!important;}
.popBox .reschedule .input .select { float: left; width: 30%; margin: 0; margin-right: 5px; }
.popBox .reschedule .input .select ~ input { width: calc(60% - 10px); }
.popBox .reschedule .input .select label::before { position: absolute; right: 10px; top: 50%; margin-top: -3px; content: ""; display: block; overflow: hidden; width: 0; height: 0; border: 3px solid transparent; border-top: 5px solid rgba(0,0,0,0.5); }
.popBox .reschedule .textarea { display: block; width: 100%; height: 100px; border: 1px solid rgba(0,0,0,0.3); border-radius: 3px; background-color: #fff;overflow-y: inherit;}
.popBox .reschedule .textarea textarea { width: 100%; height: 100%; color: #000; font-size: 12px; text-align: left; background: none;}
.popup.p1 .popBox, .popup.p2 .popBox {width: 800px;}
.popBox .bdr {border-top: 1px solid #44546a;}
.popBox .flex {width: 100%;display: flex;justify-content: space-between;margin-bottom: 2em;}
.popBox .flex .col h5, .popup.p2 .popBox h4{ display: inline-block; float: left; width: 33%; height: 35px; line-height: 37px; color: #fff; font-size: 1em; letter-spacing: 0; text-align: center; border-radius: 3px 3px 0 0; background-color: #44546a; margin-right: 15px; margin-top: 30px;}
.popBox .col {width: 50%;}
.popBox .col dl {clear: both; display: block;overflow: hidden;text-align: left;border-top: 1px solid #44546a;border-bottom: 1px solid #44546a;background-color: #f0f0f0;}
.popBox .col + .col{margin-left: 1em;}
.popBox .col dt { clear: both;display: inline-block; overflow: hidden; float: left; width: 40%; height: 45px; line-height: 45px; color: #505050; font-size: 13px; font-weight: 700; border-top: 1px solid rgba(0,0,0,0.1); padding: 0 20px; }
.popBox .col dd { display: inline-block; overflow: hidden; float: left; width: 60%; height: 45px; border-top: 1px solid rgba(0,0,0,0.1); background-color: #fff;padding: 0 20px;line-height: 45px; }
.popBox .col dd.ls {height: 130px;font-size: 13px;line-height: 20px;padding: 7px 20px 7px;text-overflow: ellipsis;}


/* 20220526 공사관리 신규 UI 및 수정 */
.popBox .reschedule .selectBox {display: flex;justify-content: start;gap:7px;margin-bottom: 8px;}
.popBox .reschedule .selectBox span:first-child {width: 60px;line-height: 33px;font-size: 12px;}
.popBox .reschedule .selectBox .select label::before {border-top: 5px solid rgba(0,0,0,0.5);}
.popBox .reschedule .selectBox .select label {background-color:#fff; color: #000;}
.popBox .reschedule p.h6{clear: both;position: relative; font-size: 13px;padding-left: 20px;margin: 5px 0;}
.popBox .reschedule p.h6::before {position: absolute;left: 3px;top: 20px;margin-top: -6.5px;z-index: 2;content: "";display: block;overflow: hidden;width: 12px;height: 5px;border-top: 2px solid #000;border-right: 2px solid #000;transform: rotate(135deg);opacity: 0.5;}
.popBox .reschedule .check label {padding: 0 8px 0px;}
.popBox .table.scrollX{display: inline-block;overflow-x: auto;max-height: 220px;}

nav.gnb ul.slickNew .slick-arrow { position: absolute; top: 50%; margin-top: -20px; z-index: 500; display: block; overflow: hidden; width: 40px; height: 40px; text-indent: -9999px; opacity: 0.5; }
nav.gnb ul.slickNew .slick-arrow.slick-prev { left: 0; background: rgba(0,0,0,0.3) url("../img/bt_prev.png") no-repeat center 50%; background-size: 20px; }
nav.gnb ul.slickNew .slick-arrow.slick-next { right: 0; background: rgba(0,0,0,0.3) url("../img/bt_next.png") no-repeat center 50%; background-size: 20px; }
nav.gnb ul.slickNew .slick-arrow:hover { opacity: 1; }
nav.gnb ul.slickNew li:nth-of-type(6) .mm::before { background: url("../img/sample_thumb_01.jpg") no-repeat center 50%; background-size: cover; }
nav.gnb ul.slickNew li:nth-of-type(7) .mm::before { background: url("../img/sample_thumb_02.jpg") no-repeat center 50%; background-size: cover; }
nav.gnb ul.slickNew li:nth-of-type(8) .mm::before { background: url("../img/sample_thumb_03.jpg") no-repeat center 50%; background-size: cover; }
nav.gnb ul.slickNew li:nth-of-type(9) .mm::before { background: url("../img/sample_thumb_04.jpg") no-repeat center 50%; background-size: cover; }
nav.gnb ul.slickNew li:nth-of-type(10) .mm::before { background: url("../img/sample_thumb_05.jpg") no-repeat center 50%; background-size: cover; }
nav.gnb ul.slickNew li:nth-of-type(11) .mm::before { background: url("../img/sample_thumb_01.jpg") no-repeat center 50%; background-size: cover; }
nav.gnb ul.slickNew li:nth-of-type(12) .mm::before { background: url("../img/sample_thumb_02.jpg") no-repeat center 50%; background-size: cover; }

.popBox .reschedule .table th.stiky {position: sticky;top: 0;z-index: 8;background: gray;}
.popBox .reschedule .scrollX.table td {height: 35px;padding: 0px 10px;}
.popBox .reschedule .table td input[type="date"] {display: inline-block;width: 86%;}
.popBox .table.scrollRow{display: block;overflow-x: auto;max-height: 490px;}
.popBox .table.w100 td{width:96px;}
.popBox .table.w100 td:nth-child(1),.popBox .table.w100 td:nth-child(2){text-indent:-25px;}
.popBox .table.w100 td:nth-child(3){text-indent:-20px;}
.popBox .table.w100 td:nth-child(4){text-indent:10px;}
.popBox .table.w100 td:nth-child(5){text-indent:10px;}
.popBox .table.w100 td.pd15 {padding: 0 15px;}
.popBox .table.w100 thead {width: 100%;display: table;position: sticky;top: 0;}
.popup.p3 .popBox {max-height: 600px;overflow: scroll;}
.popBox .reschedule .scrollX.table ~ .textarea { display: block; width: 100%; height: 50px; border: 1px solid rgba(0,0,0,0.3); border-radius: 3px; background-color: #fff;overflow-y: inherit;}
.popBox .reschedule .scrollX.table td .check {margin: 0;}
.popBox .reschedule .scrollX.table td a.btSmt {height: 28px;line-height: 25px;}

/**************************************** RESPONSIVE ****************************************/

@media all and (max-width: 1200px) {
	
	.inner { width: 100%; padding: 0 20px; }
	
	/*<--20201102*/
	section.main h1 { top: 20px; left: 20px; }
	section.main h2 { height: 60px; background-position: center 50%; margin: 10px auto; }
	section.main h3 { margin-top: 80px; }
	section.main .user { top: 20px; right: 20px; }
	section.main .siteInfo { padding: 10px 0; padding-left: 120px; }
	/*20201102-->*/
	
	section.schedule .btns .btOrder,
	section.schedule .btns .btReset { width: 40px; background-position: center 50%; text-indent: -9999px; padding: 0; }
	
}
@media all and (max-width: 1000px) {
	
	.calendar ol > li:nth-of-type(3) ~ li { display: none; }
	.calendar.col ol > li:nth-of-type(3) ~ li { display: block; }
	
}