@charset "utf-8";
@import "reset.css";

/* common style */
html.fixed {position: fixed; left: 0; width: 100%; height: 100%;}

label.rdo {display: inline-block; position: relative; padding: 0 0 0 24px;}
label.rdo input {position: absolute; top: 5px; left: 0; width: 1px; height: 1px; opacity: 0; cursor: pointer;}
label.rdo span {display: block;}
label.rdo span:before {display: block; content: ''; position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0; background: url(../../images/util/rdo.png) 0 0 no-repeat;}
label.rdo input:checked + span:before {background-position: 0 -16px;}

label.chk {display: inline-block; position: relative; padding: 0 0 0 24px;}
label.chk input {position: absolute; top: 5px; left: 0; width: 1px; height: 1px; opacity: 0; cursor: pointer;}
label.chk span {display: block;}
label.chk span:before {display: block; content: ''; position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0; background: url(../../images/util/chk.png) 0 0 no-repeat;}
label.chk input:checked + span:before {background-position: 0 -16px;}

.btn_wrap {overflow: hidden; width: 100%; text-align: center;}
.btn_wrap a {float: left; margin: 0 0 0 10px;}
.btn_wrap a:first-child {margin: 0;}
.btn_wrap input {float: left; margin: 0 0 0 10px;}
.btn_wrap input:first-child {margin: 0;}
.btn_wrap button {float: left; margin: 0 0 0 10px;}
.btn_wrap button:first-child {margin: 0;}

.btn25 {display: inline-block; height: 25px; border: none; font-weight: 700; font-size: 13px; line-height: 23px; text-align: center; box-sizing: border-box;}
.btn25.c1 {border: 1px solid #364250; background: #364250; color: #ffffff;}
.btn25.c2 {border: 1px solid #364250; background: #ffffff; color: #364250;}
.btn25.c3 {border: 1px solid #94c557; background: #94c557; color: #ffffff;}
.btn25.c4 {border: 1px solid #0167db; background: #ffffff; color: #0167db;}
.btn25.c5 {border: 1px solid #f4a620; background: #f4a620; color: #ffffff;}
.btn25.c6 {border: 1px solid #ff6d60; background: #ff6d60; color: #ffffff;}

.btn25.e1 {border: 1px solid #000000; background: #ffffff; color: #000000; padding: 0 5px 0 5px}

.btn30 {display: inline-block; height: 30px; border: none; font-weight: 700; font-size: 13px; line-height: 28px; text-align: center; box-sizing: border-box;}
.btn30.c1 {border: 1px solid #000000; background: #ffffff; color: #000000;}
.btn30.c2 {border: 1px solid #666666; background: #666666; color: #ffffff;}
.btn30.c3 {border: 1px solid #94c557; background: #94c557; color: #ffffff;}
.btn30.c4 {border: 1px solid #0167db; background: #ffffff; color: #0167db;}
.btn30.c5 {border: 1px solid #f4a620; background: #f4a620; color: #ffffff;}
.btn30.c6 {border: 1px solid #ff6d60; background: #ff6d60; color: #ffffff;}

.btn30.e1 {border: 1px solid #000000; background: #ffffff; color: #000000; padding: 0 5px 0 5px}

.btn36 {display: inline-block; height: 36px; border: none; font-weight: 700; font-size: 14px; line-height: 34px; text-align: center; box-sizing: border-box;}
.btn36.c1 {border: 1px solid #000000; background: #ffffff; color: #000000;}
.btn36.c2 {border: 1px solid #666666; background: #666666; color: #ffffff;}
.btn36.c3 {border: 1px solid #94c557; background: #94c557; color: #ffffff;}
.btn36.c4 {border: 1px solid #0167db; background: #ffffff; color: #0167db;}
.btn36.c5 {border: 1px solid #f4a620; background: #f4a620; color: #ffffff;}
.btn36.c6 {border: 1px solid #ff6d60; background: #ff6d60; color: #ffffff;}

/* layer popup */
.layer_outer {display: table; table-layout: fixed; position: fixed; top: -100%; right: -100%; bottom: -100%; left: -100%; z-index: 100; width: 300%; height: 300%; background: rgba(0,0,0,0.6); opacity: 1;}
.layer_inner {display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle;}
.layer_boxed {display: inline-block; overflow-y: auto; position: relative; background: #ffffff; padding: 90px 30px 30px;}
.layer_head {position: absolute; top: 0; left: 0; right: 0; padding: 15px 30px; background: #ccd2dd;}
.layer_head .title {font-weight: 700; font-size: 18px; text-align: left; color: #000000;}
.layer_head .layer_close {display: inline-block; position: absolute; top: 50%; right: 30px; transform: translateY(-50%); font-weight: 700; font-size: 14px; line-height: 30px; color: #222222;}


/* load motion */
.n-motion {opacity: 0; transition-property: all; transition-duration: 0.6s;}

.n-delay1 {transition-delay: 0.1s;}
.n-delay2 {transition-delay: 0.2s;}
.n-delay3 {transition-delay: 0.3s;}
.n-delay4 {transition-delay: 0.4s;}
.n-delay5 {transition-delay: 0.5s;}
.n-delay6 {transition-delay: 0.6s;}
.n-delay7 {transition-delay: 0.7s;}
.n-delay8 {transition-delay: 0.8s;}
.n-delay9 {transition-delay: 0.9s;}

.n-motion.n-left   {transform: translateX(-50px);}
.n-motion.n-right  {transform: translateX(50px);}
.n-motion.n-top    {transform: translateY(-50px);}
.n-motion.n-bottom {transform: translateY(50px);}
.n-motion.n-spin   {transform: rotate(180deg);}

.n-motion.n-active {opacity: 1;}

.n-motion.n-left.n-active   {transform: translateX(0);}
.n-motion.n-right.n-active  {transform: translateX(0);}
.n-motion.n-top.n-active    {transform: translateY(0);}
.n-motion.n-bottom.n-active {transform: translateY(0);}
.n-motion.n-spin.n-active   {transform: rotate(0deg);}

/* lazy load */
.lazy-hidden {opacity: 0;}
.lazy-loaded {transition: all 0.3s; opacity: 1;}

/* style start */
#wrap {box-sizing: border-box; width: 100%; min-width: 1880px; min-height:100%; padding: 0 0 145px; position: relative; overflow: hidden;}


#container {position: relative; padding: 14px 0 0 195px;}

#aside {position: absolute; top: 60px; left: 0; bottom: 0; width: 195px; background: #212230; z-index: 100; transform: translateZ(0); -webkit-transform: translateZ(0); -ms-transform: translateZ(0);}
#aside .intro {width: 100%; height: 100px; padding: 0 0 0 90px; box-sizing: border-box; overflow: hidden; position: relative; margin: 0 0 10px; background: #2f303f;}
#aside .intro .photo {width: 60px; height: 60px; border-radius: 100%; background: url(../../images/common/default_profile.png) 0 0 no-repeat; background-size: 60px; position: absolute; top: 20px; left: 15px;}
#aside .intro .photo img {width: 60px; height: 60px;}
#aside .intro .infor {display: table; table-layout: fixed; width: 100%;}
#aside .intro .infor .inner {display: table-cell; height: 100px; vertical-align: middle;}
#aside .intro .infor .greeting {font-size: 13px; color: #ffffff;}
#aside .intro .infor .greeting .name {font-weight: 700;}
#aside .intro .infor .utils {margin: 10px 0 0; overflow: hidden;}
#aside .intro .infor .utils a {display: block; float: left; position: relative; font-size: 12px; color: #aaaaaa; margin: 0 0 0 15px;}
#aside .intro .infor .utils a:before {display: block; content: ''; width: 1px; height: 10px; background: #666666; position: absolute; top: 4px; left: -8px;}
#aside .intro .infor .utils a:first-child {margin: 0;}
#aside .intro .infor .utils a:first-child:before {display: none;}

#aside .lnb {overflow: hidden;}
#aside .lnb button {display: block; position: relative; width: 100%; height: 50px; padding: 0 0 0 20px; margin: 0; box-sizing:border-box; text-align: left; font-size: 16px; color: #ffffff; background: #2f303f;}
#aside .lnb button:before {display: block; content: ''; position: absolute; top: 50%; right: 20px; width: 2px; height: 10px; background: #ffffff; transform:rotate(45deg) translateY(-50%); border-radius: 2px; transition:all .12s;}
#aside .lnb button:after {display: block; content: ''; position: absolute; top: 50%; right: 19px; width: 2px; height: 10px; background: #ffffff; transform:rotate(-45deg) translateY(-50%); border-radius: 2px; transition:all .12s;}

#aside .lnb a {display: block; padding: 4px 0 4px 0; box-sizing: border-box; position: relative; line-height: 1.2; color: #777777;}
#aside .lnb a.on {color: #ffffff;}
#aside .lnb a:before {background: #ffffff;}

#aside .lnb ul {}
#aside .lnb ul li {position: relative;}
#aside .lnb ul li:before {display: block; content: ''; position: absolute; top: 12px; left: -20px; width: 10px; height: 1px; background: #999999;}
#aside .lnb ul li:last-child:after {display: block; content: ''; position: absolute; top: 13px; left: -20px; width: 1px; height: 9999px; background: #212230;}
#aside .lnb ul li.ui-sortable-helper:after {display: none;}
#aside .lnb ul li.on a {color: #ffffff;}

#aside .lnb > ul > li ul {position: relative; padding: 4px 0 4px 25px;}
#aside .lnb > ul > li ul:before {display: block; content: ''; position: absolute; top: 0; left: 5px; bottom: 0; width: 1px; background: #999999;}
#aside .lnb > ul > li ul li {margin: 2px 0 0;}
#aside .lnb > ul > li ul li:first-child {margin: 0;}

#aside .lnb > ul > li > ul {padding: 14px 0 14px 40px;}
#aside .lnb > ul > li > ul:before {left: 20px;}

#aside .lnb > ul > li {margin: 0;}

#aside .lnb > ul > li ul button {box-sizing: border-box; height: 24px; margin: 0; padding: 0 0 0 0; font-size: 14px; background: none; color: #aaaaaa;}
#aside .lnb > ul > li ul button:before {height: 8px;}
#aside .lnb > ul > li ul button:after {height: 8px;}

#aside .lnb ul li.close > ul {display: none;}
#aside .lnb ul li.close > button:before {right: 25px;}
#aside .lnb ul li.close > button:after {right: 14px;}

#aside .lnb > ul > li.close {margin: 0 0 10px;}
#aside .lnb > ul > li.close > button:before {right: 26px;}
#aside .lnb > ul > li.close > button:after {right: 13px;}

#contents {padding: 0 24px 24px 24px;}
#contents .yj-s-con {display: none;}
#contents .yj-s-con.active {display: block;}
/* #contents .section {margin: 50px 0 0;} */ /*수정*/
#contents .section:first-child {margin: 0;}
#contents .content {}
#contents .content:first-child {margin: 0;}
#contents .halfwrap {overflow: hidden;}
#contents .halfwrap .halfsect {float: left; width: 48%; margin: 0 0 0 4%;}
#contents .halfwrap .halfsect:first-child {margin: 0;}

#statbar {border-bottom: 1px solid #14141e; background: #e4ebf6;}
#statbar ul {overflow: hidden;}
#statbar ul li {float: left; border-right: 1px solid #14141e; position: relative;}
#statbar ul li .btn {display: block; padding: 0 30px; text-align: center; background: #ffffff; font-size: 13px; line-height: 31px; color: #14141e;}
#statbar ul li .dlt {display: block; width: 9px; height: 9px; background: url(../../images/common/close_navy.png) 0 0 no-repeat; position: absolute; top: 12px; right: 7px;}
#statbar ul li.active .btn {background: #2f303f; color: #ffffff;}
#statbar ul li.active .dlt {background: url(../../images/common/close_white.png) 0 0 no-repeat;}

#windowpopup {padding: 24px;}

.section {margin: 20px 0 0;} /*수정*/
.section:first-child {margin: 0;}

.h2group {margin: 0 0 12px;}
.h2group .tit {position: relative; padding: 0 0 0 10px; font-weight: 700; font-size: 16px; color: #333333;}
.h2group .tit:before {display: block; content: ''; position: absolute; top: 50%; left: 0; width: 5px; height: 5px; margin: -2px 0 0; background: #000000;}
.h2group .tit .cnt {display: inline-block; margin: 0 0 0 7px; color: #0167db;}
.h2group.in-btn {position: relative; padding: 0 51px 0 0;}
.h2group.in-btn .more-btn {display: block; position: absolute; top: 0; right: 0; padding: 0 5px; border: 1px solid #0167db; text-align: center;}
.h2group.in-btn .more-btn span {display: inline-block; padding: 0 10px 0 0; background: url(../../images/common/arr-blue-right-5x7.png) right center no-repeat; font-weight: 700; font-size: 13px; line-height: 19px; color: #0167db; letter-spacing: -0.03em;}

.write_table {border-top: 1px solid #2f303f; border-bottom: 1px solid #2f303f;}
.write_table tbody tr th {padding: 7px 0 9px 16px; border-top: 1px solid #c8ccd7; background: #e7e9f5; font-weight: 700; font-size: 13px; line-height: 19px; color: #555555; text-align: left;}
.write_table tbody tr th.th1 {background: #ccd2dd; padding: 8px 0 8px 16px; text-align: left; border-color: #eeeeee;}
/* .write_table tbody tr th.th1 {background: #ccd2dd; padding: 8px 0; text-align: center; border-color: #eeeeee;} */
.write_table tbody tr td {padding: 5px 12px; border-top: 1px solid #cccccc; line-height: 25px;}
.write_table tbody tr.f-row td {position: relative;}
.write_table tbody tr.f-row td img.image {width: 80px; cursor: zoom-in;}
.write_table tbody tr.f-row td img.originSize {position: absolute; top: 5px; left: 90px; z-index: 99; width: auto;}
.write_table tbody tr:first-child th {border-top: none;}
.write_table tbody tr:first-child td {border-top: none;}
.write_table tbody tr td .boxed {display: inline-block; width: 100%;}
.write_table tbody tr td .boxed > * {float:left; margin: 0 0 0 8px;}
.write_table tbody tr td .boxed > *:first-child {margin: 0;}
.write_table tbody tr td .boxed > .txt {line-height: 25px;}
.write_table tbody tr td .boxed label.rdo span {line-height: 30px;}
.write_table tbody tr td .boxed label.chk span {line-height: 30px;}
.write_table tbody tr td .boxed input,
.write_table tbody tr td .boxed select {max-width: 100%;}
.write_table tbody tr td .img_add {width: 250px;}
.write_table tbody tr td .img_add .img_box {display: table-cell; width: 250px; height: 250px; border: 1px solid #666666; background: #f7f7f7; text-align: center; vertical-align: middle;}
.write_table tbody tr td .img_add .img_box img {max-width: 100%; max-height: 100%;}
.write_table tbody tr td .img_add .btn_wrap {margin: 10px 0;}
.write_table tbody tr td .img_add .btn_wrap .fl_l {width: 49%;}
.write_table tbody tr td .img_add .btn_wrap .fl_r {width: 49%;}
.write_table tbody tr td .img_add .btn_wrap button {width: 100%;}

.write_table tbody tr td .attach {}
.write_table tbody tr td .attach .file-imgbox {overflow: hidden; border: 1px solid #ddd;}
.write_table tbody tr td .attach .file-imgbox .imgs {float: left; position: relative; margin: 0 0 10px 10px;}
.write_table tbody tr td .attach .file-imgbox .imgs:first-child {margin-left: 0;}
.write_table tbody tr td .attach .file-imgbox .imgs img {max-width: 100%; width: 100%; max-height: 100%; height: 100%;}
.write_table tbody tr td .attach .file-imgbox .imgs .del-trg {position: absolute; top: 0; right: 0; padding: 2px 10px; background: rgba(0, 0, 0, 0.8); font-weight: 700; font-size: 14px; color: #ffffff;}
.write_table tbody tr td .attach input[type=file] {border: none; background: none; border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none;}
.write_table tbody tr td .attach .btn25 {display: inline-block; position: relative;}
.write_table tbody tr td .attach .btn25 input {position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; cursor: pointer;}
    
.write_table tbody tr td .list_tb thead tr th {height: 24px; padding: 0; text-align: center;}
.write_table tbody tr td .list_tb tbody tr td.img {width: 42px; height: 42px;}
.write_table tbody tr td .list_tb tbody tr td.img a {width: 40px; height: 40px;}
.write_table tbody tr td .list_tb tbody tr td.img img {}

.write_table tbody tr td .multi_attach {padding: 10px; border: 1px solid #cccccc; background: #ffffff;}
.write_table tbody tr td .multi_attach .multi_area {position: relative; height: 166px; margin: 0 0 10px; background: url(../../images/common/attach_box_bg_off.png) center 21px no-repeat;}
.write_table tbody tr td .multi_attach .multi_area .txt {position: relative; top: 74px; text-align: center; font-size: 14px; color: #868686;}
.write_table tbody tr td .multi_attach .multi_area.on {background-image:url(../../images/common/attach_box_bg_on.png);}
.write_table tbody tr td .multi_attach .multi_area.on .txt {color: #4b8cfa;}
.write_table tbody tr td .multi_attach .multi_area .btn {overflow: hidden; position: absolute; top: 113px; left: 50%; width: 94px; height: 33px; margin: 0 0 0 -47px;}
.write_table tbody tr td .multi_attach .multi_area .btn input[type=file] {position: absolute; top: 0; right: 0; font-size: 30px; opacity: 0;}
.write_table tbody tr td .multi_attach .multi_area .btn .btn36 {width: 100%;}
.write_table tbody tr td .multi_attach .multi_list {}
.write_table tbody tr td .multi_attach .multi_list li {overflow: hidden; position: relative; margin: 2px 0 0; padding: 0 40px 0 12px; background: #eef2f6;}
.write_table tbody tr td .multi_attach .multi_list li:first-child {margin: 0px;}
.write_table tbody tr td .multi_attach .multi_list li .file {display: block; overflow: hidden; padding: 0 0 0 25px; background: url(../../images/common/ico_attach.png) 0 center no-repeat; font-size: 14px; line-height: 33px; color: #555555; text-overflow: ellipsis; white-space: nowrap; word-break: break-all;}
.write_table tbody tr td .multi_attach .multi_list li .delete {display: block; position: absolute; top: 0; right: 0; width: 33px; height: 33px; background: url(../../images/common/attach_delete.png) center center no-repeat; transition: all .5s;}
.write_table tbody tr td .multi_attach .multi_list li .delete:hover {transform: rotate(180deg);}

.list_tb {border-collapse: collapse; border: solid #c5c5c5; border-width: 1px 0;}
.list_tb thead tr th {border-left: 1px solid #c5c5c5; height: 36px; background: #e4ebf6; color: #000000; font-weight: 700;}
.list_tb thead tr th:last-child {border-right: 1px solid #c5c5c5;}
.list_tb thead tr th label.chk {width: 100%; height: 16px; padding: 0; vertical-align: middle;}
.list_tb thead tr th label.chk span {height: auto; line-height: 0px;}
.list_tb thead tr th label.chk span:before {top: 50%; left: 50%; margin: -8px 0 0 -8px;}
.list_tb tbody tr td {border-left: 1px solid #c5c5c5; padding: 5px; font-size: 12px; text-align: center; border-top: 1px solid #cccccc;}
.list_tb tbody tr td.imgs img {max-width: 100%; width: 100%; max-height: 100%;}
.list_tb tbody tr td:last-child {border-right: 1px solid #c5c5c5;}
/* 이미지 over 추가 시작 */
.list_tb tbody tr.f-row td {position: relative;}
.list_tb tbody tr.f-row td img.image {width: 80px; cursor: zoom-in;}
.list_tb tbody tr.f-row td img.originSize {position: absolute; top: 5px; left: 90px; z-index: 99; width: auto;}
/* 이미지 over 추가 끝 */
.list_tb tbody tr td.img {}
.list_tb tbody tr td.img a {display: table; table-layout: fixed; width: 80px; height: 80px; margin: 0 auto; border: 1px solid #cccccc;}
.list_tb tbody tr td.img a span {display: table-cell; width: 80px; height: 80px; text-align: center; vertical-align: middle;}
.list_tb tbody tr td.img img {max-width: 100%; max-height: 80px;}
.list_tb tbody tr td.tit {padding: 0 20px; text-align: left;}
.list_tb tbody tr td.tit a {display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}


.list_tb tbody tr:hover td {background: rgba(231, 233, 245, .6); font-weight: 700; color: #000000;}
.list_tb tbody tr.hover td {background: rgba(231, 233, 245, .6); font-weight: 700; color: #000000;}

.list_tb tbody tr td.single label.chk {width: 100%; height: 16px; padding: 0; vertical-align: middle;}
.list_tb tbody tr td.single label.chk span {height: auto; line-height: 0px;}
.list_tb tbody tr td.single label.chk span:before {top: 50%; left: 50%; margin: -8px 0 0 -8px;}
.list_tb tbody tr td.null {height: 100px; font-weight: 700; font-size: 16px; text-align: center; color: #222222;}
.list_tb tbody tr td.on {font-weight: 700; text-align: center; background: #2d3d47; color:#ffffff;}

.list_tb tbody tr.ui-sortable-handle {cursor: pointer;}
.list_tb tbody tr.ui-sortable-handle:hover {background: #f7f7f7;}
.list_tb tbody tr.ui-sortable-helper {background: #ffffff; border-bottom: 1px solid #cccccc; background: #f7f7f7;}
.list_tb tbody tr.ui-sortable-placeholder {visibility: visible !important;}
.list_tb tbody tr.ui-sortable-placeholder td {height: 80px; border-top: 1px solid #cccccc;}

.list_tb.list {margin: -1px 0 0; border: 1px solid #008080 !important;}
.list_tb.list:first-of-type {margin: 0;}
.list_tb.list tbody tr:first-child td {border-top: none !important;}
.list_tb.list tbody tr td:first-child {border-left: none;} 
.list_tb.list tbody tr td:last-child {border-right: none;} 
.list_tb.list tbody tr.first td {background: rgba(0,128,128,.05);}

.pagination {width: 100%; height: 30px; margin: 20px 0 0; overflow: hidden; text-align: center; position: relative;}
.pagination .paging {display: inline-block; vertical-align: top;}
.pagination .paging > a {display: block; width: 30px; height: 30px; box-sizing: border-box; margin: 0 0 0 6px; float: left; border: 1px solid #aaaaaa;}
.pagination .paging .page_first {background: url(../../images/util/page_first.png) center center no-repeat; margin: 0px;}
.pagination .paging .page_prev {background: url(../../images/util/page_prev.png) center center no-repeat;}
.pagination .paging .page_next {background: url(../../images/util/page_next.png) center center no-repeat; margin: 0px;}
.pagination .paging .page_last {background: url(../../images/util/page_last.png) center center no-repeat;}
.pagination .paging .page {display: block; float: left; padding: 0 18px;}
.pagination .paging .page a {display: block; float: left; box-sizing: border-box; width: auto; min-width: 30px; height: 30px; margin-left: 6px; padding: 0 5px; font-size: 14px; line-height: 30px; color: #333333; background: #ffffff;}
.pagination .paging .page a.current {background: #364250; font-weight: 700; color: #ffffff;}
.pagination .paging .page a:first-child {margin: 0px;}
.pagination .pos_r {position: absolute; top: 0; right: 0;}

#login {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 398px;}
#login h1 {text-align: center;}
#login .ipt-box {margin: 30px 0 0;}
#login .ipt-box input {margin: 10px 0 0; height: 39px; border: none; padding: 0 0 0 20px; font-size: 15px; line-height: 39px; color: #888888;}
#login .ipt-box input:placeholder {color: #888888; opacity: 1;}
#login .ipt-box input:-ms-input-placeholder {color: #888888;}
#login .ipt-box input::-ms-input-placeholder {color: #888888;}
#login .ipt-box input:first-child {margin: 0;}
#login .ipt-box .btn_wrap {margin: 10px 0 0; text-align: center;}
#login .ipt-box .btn_wrap button {width: 100%; background: #2d3d47; font-size: 15px; line-height: 51px; color: #ffffff;}
#login .notice {margin: 28px 0 0; font-size: 13px; line-height: 19px; color: #8b8b8b; text-align: center; letter-spacing: -0.05em;}

.treemenu {padding: 12px; border: 2px solid #212230;}
.treemenu ul {position: relative; padding: 4px 0 0 21px;}
.treemenu ul:before {display: block; content: ''; position: absolute; top: -12px; bottom: -12px; left: 10px; width: 1px; background: #999999;}
.treemenu ul li {position: relative; margin: 4px 0;}
.treemenu ul li:first-child {margin: 0 0 4px;}
.treemenu ul li:last-child {margin: 4px 0 0;}
.treemenu ul li .menu {display: inline-block; padding: 0 12px; border-radius: 4px; font-size: 12px; line-height: 25px; background: #2f303f; color: #f7f7f7;}
.treemenu ul li:before {display: block; content: ''; position: absolute; top: 12px; left: -11px; width: 12px; height: 1px; background: #999999;}
.treemenu ul li:last-child:after {display: none; content: ''; position: absolute; top: 13px; left: -11px; width: 1px; height: 9999px; background: #212230;}
.treemenu ul li .control {display: inline-block; position: relative; z-index: 1; box-sizing: border-box; width: 21px; height: 21px; margin: 2px 6px 0 0; border: 2px solid #2f303f; border-radius: 100%; background: #212230;}
.treemenu ul li .control:before {display: block; position: relative; content: ''; width: 7px; height: 1px; position: absolute; top: 8px; left: 5px; background: #999999;}
.treemenu ul li .control:after {display: none; position: relative; content: ''; width: 1px; height: 7px; position: absolute; top: 5px; left: 8px; background: #999999;}
.treemenu ul li.minus > ul {display: none;}
.treemenu ul li.minus .control:after {display: block;}
.treemenu ul li.ui-sortable-helper:after {display: none;}

.YJcalendar-wrap {position:relative;}
.YJcalendar-wrap .YJcalendar-inner {width:252px; box-sizing:border-box;}

.YJcalendar-wrap.YJcalendar-type-input .YJcalendar-inner {display:none; position:absolute; z-index:1;}
.YJcalendar-wrap.YJcalendar-type-input.open .YJcalendar-inner {display:block;}

.YJcalendar-wrap .YJcalendar-inner .YJcalendar-head {height:40px; text-align:center; position:relative; background: #040406;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-head .YJcalendar-select-area {font-weight: 700; color: #ffffff; line-height: 40px;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-head .YJcalendar-select-area select {margin: 0 0 0 10px; width: 60px; height: 40px; padding: 0; border: none; background: #000000; font-size: 13px; color: #ffffff;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-head .YJcalendar-select-area select:first-child {margin: 0;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-head .YJcalendar-select-area .YJcalendar-year {}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-head .YJcalendar-select-area .YJcalendar-month {margin: 0 0 0 5px;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-head .YJcalendar-month-prev {width: 40px; height: 40px; position:absolute; top:0; left:0; text-indent: -9999px;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-head .YJcalendar-month-prev:before {display: block; content: ''; width: 2px; height: 14px; transform: rotate(45deg); background: #ffffff; position: absolute; top: 8px; left: 18px;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-head .YJcalendar-month-prev:after {display: block; content: ''; width: 2px; height: 14px; transform: rotate(-45deg); background: #ffffff; position: absolute; top: 17px; left: 18px;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-head .YJcalendar-month-next {width: 40px; height: 40px; position:absolute; top:0; right:0; text-indent: -9999px;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-head .YJcalendar-month-next:before {display: block; content: ''; width: 2px; height: 14px; transform: rotate(-45deg); background: #ffffff; position: absolute; top: 8px; left: 18px;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-head .YJcalendar-month-next:after {display: block; content: ''; width: 2px; height: 14px; transform: rotate(45deg); background: #ffffff; position: absolute; top: 17px; left: 18px;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-head .YJcalendar-year-prev {display: none; position: absolute; top: 20px; left: 0;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-head .YJcalendar-year-next {display: none; position: absolute; top: 20px; right: 0;}

.YJcalendar-wrap .YJcalendar-inner .YJcalendar-body {}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-body table {}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-body table thead tr th {height: 30px; padding: 0; text-align: center; background: #212230; color: #ffffff;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-body table tbody tr td {height: 36px; padding: 0; text-align: center; vertical-align: middle; background: #2f303f; font-size: 14px; color: #a4a5b9; cursor: pointer; border-top: none;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-body table tbody tr td:hover {background:#000000; color: #ffffff;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-body table tbody tr td.today {background:#000000; color: #ffffff;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-body table tbody tr td.sunday {}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-body table tbody tr td.holiday {}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-body table tbody tr td.saturday {}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-body table tbody tr td.selected {background:#000000; color: #ffffff; font-weight: 700;}
.YJcalendar-wrap .YJcalendar-inner .YJcalendar-body table tbody tr td.disabled {background:#65667f; color:#a4a5b9 !important; cursor: default;}

#loader-wrapper {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;}
#loader {display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; z-index: 1001;
	-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
			animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:before {content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e74c3c;
	-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
			animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:after {content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #f9c922;
	-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
			animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
@-webkit-keyframes spin {
	0%   {
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
			-ms-transform: rotate(0deg);  /* IE 9 */
				transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
			-ms-transform: rotate(360deg);  /* IE 9 */
				transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}
@keyframes spin {
	0%   {
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
			-ms-transform: rotate(0deg);  /* IE 9 */
				transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
			-ms-transform: rotate(360deg);  /* IE 9 */
				transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}
#loader-wrapper .loader-section {position: fixed; top: 0; width: 51%; height: 100%; background: #222222; z-index: 1000;
	-webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: translateX(0);  /* IE 9 */
			transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
}

#loader-wrapper .loader-section.section-left {left: 0;}
#loader-wrapper .loader-section.section-right {right: 0;}

.loaded #loader-wrapper .loader-section.section-left {
	-webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: translateX(-100%);  /* IE 9 */
			transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */

	-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
			transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper .loader-section.section-right {
	-webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: translateX(100%);  /* IE 9 */
			transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */

	-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
			transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader {opacity: 0;
	-webkit-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {visibility: hidden;
	-webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: translateY(-100%);  /* IE 9 */
			transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

	-webkit-transition: all 0.3s 1s ease-out;
			transition: all 0.3s 1s ease-out;
}

#header {position: relative; z-index: 100; width: 100%;}
#header .inner {position: relative; height: 60px; padding: 0 480px 0 220px; background: #eef2f6;}
#header .inner .logo {position: absolute; top: 0; left: 0; width: 195px; height: 60px; background: #ffffff;}
#header .inner .logo a {display: inline-block; position: absolute; top: 7px; left: 7px; width: 180px;}
#header .inner .logo a img {max-width: 100%; width: auto; }

#header .inner .gnb_wrap {display: inline-block; overflow-x: auto; overflow-y: hidden; box-sizing: border-box; width: 100%; height: auto;}
#header .inner .gnb_wrap .gnb_list {white-space: nowrap; font-size: 0;}
#header .inner .gnb_wrap .gnb_list li {display: inline-block; margin: 0 0 0 43px;}
#header .inner .gnb_wrap .gnb_list li:first-child {margin: 0;}
#header .inner .gnb_wrap .gnb_list li a {display: block; position: relative; font-weight: 700; font-size: 16px; line-height: 60px; color: #002B49;}
#header .inner .gnb_wrap .gnb_list li a:before {display: block; content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 3px; background: #2d3d47; transform: scaleX(0); transition: all .3s; opacity: 0;}
#header .inner .gnb_wrap .gnb_list li a:hover:before {transform: scaleX(1); opacity: 1;}
#header .inner .gnb_wrap .gnb_list li a.on:before {display: block; content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 3px; background: #2d3d47; transform: scaleX(1); opacity: 1;}

#header .inner .user_box {position: absolute; right: 0; bottom: 0; font-size: 0; padding: 0 10px 0 0;}
#header .inner .user_box .site_util {display: inline-block; vertical-align: middle;}
#header .inner .user_box .site_util li {float: left; margin: 0 0 0 5px;}
#header .inner .user_box .site_util li:first-child {margin: 0;}
#header .inner .user_box .site_util li a {display: inline-block; padding: 0 10px; border-width: 1px; border-style: solid; background: #ffffff; font-size: 13px; line-height: 23px; text-align: center;}
#header .inner .user_box .site_util li.c1 a {border-color: #0167db; color: #0167db;}
#header .inner .user_box .site_util li.c2 a {border-color: #364250; color: #364250;}

#header .inner .user_box .user_id {display: inline-block; margin: 0 0 0 30px; font-weight: 700; font-size: 15px; line-height: 60px; color: #002B49; vertical-align: middle;}

#header .inner .user_box .user_util {display: inline-block; vertical-align: middle; margin: 0 0 0 20px;}
#header .inner .user_box .user_util li {display: inline-block; position: relative; margin: 0 0 0 31px;}
#header .inner .user_box .user_util li:before {display: block; content: ''; position: absolute; top: 50%; left: -15px; width: 1px; height: 12px; margin: -6px 0 0; background: #d3d7df;}
#header .inner .user_box .user_util li:first-child {margin: 0;}
#header .inner .user_box .user_util li:first-child:before {display: none;}
#header .inner .user_box .user_util li a {display: block; font-size: 13px; color: #777777;}

#footer {position: absolute; left: 0; bottom: 0; box-sizing: border-box; width: 100%; padding: 0 0 0 240px; background: #e8e8e8;}
#footer .ft_inner {box-sizing: border-box; height: 145px; margin: 0 auto; padding: 28px 0 51px; text-align: center;}
#footer .ft_inner .ft_menu {display: inline-block;}
#footer .ft_inner .ft_menu li {float: left;}
#footer .ft_inner .ft_menu li a {display: block; padding: 9px; font-weight: 700; font-size: 14px; line-height: 20px; color: #555555;}
#footer .ft_inner .copyright {margin: 4px 0 0; font-family: NanumSquare; font-weight: 700; font-size: 16px; line-height: 24px; color: #000000;}

#windowpopup .popup_navi {}
#windowpopup .popup_navi ul {display: table; table-layout: fixed; width: 100%; background: #eef2f6;}
#windowpopup .popup_navi ul li {display: table-cell;}
#windowpopup .popup_navi ul li a {display: block; font-weight: 700; font-size: 16px; line-height: 60px; text-align: center; color: #002B49;}
#windowpopup .popup_navi ul li a span {display: inline-block; position: relative;}
#windowpopup .popup_navi ul li a span:after {display: block; content: ''; position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 3px; background: #0167db; transform: scaleX(0); opacity: 0; transition: all .3s;}
#windowpopup .popup_navi ul li a:hover span:after {opacity: 1; transform: scaleX(1);}
#windowpopup .popup_navi ul li.on a span:after {opacity: 1; transform: scaleX(1);}

#optionForm .inner {margin: 15px 0 0; border: 1px solid #c5c5c5}
#optionForm .inner:first-child {margin: 0;}
#optionForm .inner .list_tb {border-bottom: none;}
#optionForm .inner .list_tb thead tr th:first-child {border-left: none;}
#optionForm .inner .list_tb thead tr th:last-child {border-right: none;}
#optionForm .inner .list_tb tbody tr td:first-child {border-left: none;}
#optionForm .inner .list_tb tbody tr td:last-child {border-right: none;}
 
.progress-status {width: 1670px; margin: -14px -24px 0; padding: 14px 20px 14px; background: #eef2f6;}
.progress-status .title-area {overflow: hidden;}
.progress-status .title-area .title {float: left; font-weight: 700; font-size: 18px; line-height: 24px; color: #0167db;}
.progress-status .title-area .fold-trg {float: left; margin: 0 0 0 10px; padding: 0 30px 0 10px; background: #ffffff url(../../images/common/arr-blue-bottom-11x7.png) right 9px center no-repeat; border: 1px solid #0167db; font-size: 12px; line-height: 23px; color: #0167db;}
.progress-status .title-area .fold-trg.open {background: #ffffff url(../../images/common/arr-blue-top-11x7.png) right 9px center no-repeat;}
 
.progress-status .status-list {display: none; overflow: hidden; margin: 21px 0 0;}
.progress-status .status-list li {position: relative; float: left; box-sizing: border-box; width: 269px; margin: 0 0 0 27px; padding: 7px 15px 5px; border-top: 3px solid #505050; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; background: #ffffff;}
.progress-status .status-list li:after {display: block; content: ''; position: absolute; top: 50px; left: -18px; width: 9px; height: 16px; background: url(../../images/common/arr-gray-right-9x16.png) center center no-repeat;}
.progress-status .status-list li:first-child {margin: 0;}
.progress-status .status-list li:first-child:after {display: none;}
.progress-status .status-list li .title {font-weight: 700; font-size: 13px; line-height: 18px; color: #20222f;}
.progress-status .status-list li .info-tbl {margin: 3px 0 0;}
.progress-status .status-list li .info-tbl table {}
.progress-status .status-list li .info-tbl table thead tr th {padding: 5px 0; font-weight: 700; font-size: 11px; line-height: 20px; color: #555555; text-align: right;}
.progress-status .status-list li .info-tbl table tbody tr th {padding: 3px 0 5px; border-top: 1px solid #cccccc; font-weight: 700; font-size: 12px; line-height: 22px; color: #555555; vertical-align: top;}
.progress-status .status-list li .info-tbl table tbody tr td {padding: 3px 0 5px; border-top: 1px solid #cccccc; font-weight: 700; font-size: 12px; line-height: 22px; text-align: right; color: #0167db;}
.progress-status .status-list li .info-tbl table tbody tr td .boxed {font-size: 11px; line-height: 22px; text-align: right; color: #555555;}
.progress-status .status-list li .info-tbl table tbody tr td .boxed strong.blue {display: block; font-weight: 700; font-size: 12px; color: #0167db;}
.progress-status .status-list li .info-tbl table tbody tr td .boxed strong.red {display: block; font-weight: 700; font-size: 12px; color: #ff4474;}
.progress-status .status-list li.small {width: 460px; border: none; background: none; padding: 0;}
.progress-status .status-list li.small:after {display: none;}
.progress-status .status-list li.small > div {float: left; width: 180px; margin: 0 0 0 27px; padding: 7px 15px 8px; border-top: 3px solid #505050; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; background: #ffffff;}
.progress-status .status-list li.small > div:first-child {margin: 0;}
.progress-status .status-list li.small > div > table {margin: 2px 0 0;}
.progress-status .status-list li.small > div > table tbody tr th {padding: 2px 0; font-weight: 700; font-size: 11px; line-height: 22px; color: #555555;}
.progress-status .status-list li.small > div > table tbody tr td {padding: 2px 0; font-weight: 700; font-size: 12px; line-height: 22px; text-align: right;}
.progress-status .status-list li.small > div > table tbody tr td.blue {color: #0167db;}
.progress-status .status-list li.small > div > table tbody tr td.red {color: #ff4474;}
.progress-status .status-list.on {display: block;}

.main-tbl-box {overflow: hidden; padding: 16px 0;}
.main-tbl-box ul.l-list {float: left;}
.main-tbl-box ul.r-list {float: right;}
.main-tbl-box ul {overflow: hidden;}
.main-tbl-box ul li {width: 795px; margin: 16px 0 0;}
.main-tbl-box ul li:first-child {margin: 0;}

.main_tbl {border-top: 3px solid #374148; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc;}
.main_tbl thead tr th {position: relative; padding: 7px 0; border-bottom: 1px solid #cccccc; background: #eef2f6; font-weight: 700; font-size: 12px; line-height: 18px; color: #000; text-align: center;}
.main_tbl thead tr th:after {display: block; content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: 12px; margin: -6px 0 0; background: #cccccc;}
.main_tbl thead tr th:first-child:after {display: none;}
.main_tbl tbody tr th {border-bottom: 1px solid #cccccc; font-weight: 700; font-size: 13px; line-height: 20px; color: #555555; text-align: center;}
.main_tbl tbody tr td {padding: 8px 16px 10px 0; border-bottom: 1px solid #cccccc; font-size: 13px; line-height: 20px; color: #555555; text-align: right;}
.main_tbl tbody tr td.ta_c {padding: 8px 0 10px;}
.main_tbl tbody tr td.ta_l {padding: 8px 0 10px 17px;}
.main_tbl tbody tr:last-child th {border-bottom: none;}
.main_tbl tbody tr:last-child td {border-bottom: none;}
.main_tbl tbody tr.empty td {padding: 17px 0 18px; font-size: 13px; line-height: 20px; color: #999999; text-align: center;}
.main_tbl tbody tr.bg th {background: #f5f7fc; color: #000000;}
.main_tbl tbody tr.bg td {background: #f5f7fc; color: #000000;}
.main_tbl tbody tr th.blue {color: #0167db;}
.main_tbl tbody tr td.blue {color: #0167db;}
.main_tbl tbody tr th.red {color: #ff4474;}
.main_tbl tbody tr td.red {color: #ff4474;}