@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');
/*-------------------------------------------------
Author : WB,Seo
Create date : 2022. 03. 29.
Last update : 2022. 06. 14. 11:28
-------------------------------------------------*/
/* =============================
    MAIN/CO-AREA
============================== */
.main-wrap.co-area {
    margin: 74px 0 0 325px;
    padding-bottom: 84px;
    width: 1194px;
}
.main-wrap .tit-wrap {position: relative;}
.main-wrap .tit-wrap:after {
    display: block;
    content: '';
    width: 45px; height: 4px;
    margin: 20px 0 42px;
    background: #b19983;
}
.main-wrap .tit-wrap h3 {
    display: inline-block;
    font-size: 3rem; color: #525252;
}
.main-wrap .tit-wrap .btn-total-mag-wrap {
    position: relative;
    display: inline-block;
}
.main-wrap .tit-wrap .btn-total-management {
    padding: 2px 0 0 2px;
    width: 34px; height: 34px;
    margin-left: 11px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0px 1px 5.82px 0.18px rgba(49, 45, 41, 0.33);
}
.main-wrap .tit-wrap .btn-details {
    position: absolute;
    top: 50%; right: -30px; transform: translate(100%,-50%);
}
.main-wrap .tit-wrap .btn-details button {
    display: block;
    width: 108px; height: 28px;
    font-size: 1.5rem; color: #fff;
    background: #c5a2f5;
    border-radius: 6px;
    transform: translateY(80%);
    opacity: 0;
    transition: .2s;
}
.main-wrap .tit-wrap .btn-details button.clicked {
    transform: translateY(0);
    opacity: 1;
}
.main-wrap .tit-wrap .btn-details .btn-wrap {
    height: 28px;
    overflow: hidden;
}
.main-wrap .tit-wrap .btn-details .btn-move {margin-left: -9px;}
.main-wrap .tit-wrap .btn-details .btn-cancel {margin: 5px 0;}
.main-wrap .tit-wrap .btn-details .btn-cancel button {
    background: #f0ba17;
    transition-delay: .15s;
}
.main-wrap .tit-wrap .btn-details .btn-delete {margin-left: -15px;}
.main-wrap .tit-wrap .btn-details .btn-delete button {
    background: #cb594a;
    transition-delay: .3s;
}
.main-wrap .tit-wrap .btn-details button img {
    display: inline-block;
    margin-right: 7px;
    vertical-align: middle;
}
.main-wrap .tit-wrap .btn-modi-available {
    position: absolute;
    top: 50%; right: 0; transform: translateY(-50%);
    width: 180px; height: 48px;
    color: #fff;
    background: #65574b;
}
.main-wrap .tit-wrap .btn-modi-available img {
    display: inline-block;
    margin-left: 5px;
    vertical-align: -2px;
}
.co-area .co-tit-group {
    height: 46px;
    padding: 0 20px;
    background: #29231c;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.co-area .co-tit-group p,
.co-area .co-tit-group h4 {
    float: left;
    margin-top: 15px;
    font-size: 1.6rem; color: #fff;
    font-weight: 700;
}
.co-area .co-tit-group button {
    float: right;
    margin-top: 9px;
    padding: 6px 13px 6px;
    font-size: 1.5rem; color: #fff;
    font-weight: 700;
    background: #388f9e;
    border-radius: 10px;
}
.co-area .co-tit-group button img {
    display: inline-block;
    vertical-align: -1px;
    margin-left: 2px;
}
.co-area table th {
    background: #f7f7f7;
    border-bottom: 1px solid #ccc !important;
    border: 0;
}
.co-area table td {
    padding: 5px 0;
    background: #fff;
    border-bottom: 1px solid #ccc;
}
.table-wrap::-webkit-scrollbar {width: 6px;}
.table-wrap::-webkit-scrollbar-track-piece {background-color: #eee;}
.table-wrap::-webkit-scrollbar-thumb {
    background-color: #c2c2c2;
    border-radius: 6px;
}
.table-wrap::-webkit-scrollbar-thumb:hover {background-color: #b2b2b2;}

/* =============================
    분양 관리/안치단 관리 공통 표
============================== */
.sale-wrap select {
    appearance: none;
    background: #fff url(/resources/images/icon-select-arrow.png) no-repeat 90% 50%;
}
.sale-wrap select,
.sale-wrap input {
    height: 35px;
    border: 1px solid #ccc;
}
.sale-wrap table th,
.sale-wrap table td {
    height: 46px;
    font-size: 1.6rem; color: #525252;
}
.sale-wrap table td {padding-left: 14px;}
.sale-wrap table td .btn-chk {
    margin-left: 9px;
    width: 80px; height: 32px;
    font-size: 1.6rem; color: #288c9e;
    border: 1px solid #288c9e;
    border-radius: 5px;
}
/* ======= 분양관리 작성/수정 페이지 */
/* ===== 검색창 */
.src-group .upper-flex-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}
.src-group .upper-flex-box .btn-excel {
    width: 106px; height: 32px;
    font-size: 1.6rem;
    color: #fff;
    background: #107c41;
    border-radius: 3px;
}
.src-group .upper-flex-box .btn-excel img {
	display: inline-block;
    margin-left: 6px;
    vertical-align: -3px;
}
/* .src-group .src-wrap {margin-bottom: 30px;} */
.src-group .src-wrap select {width: 180px; height: 42px;}
.src-group .src-wrap input {
    margin: 0 10px;
    width: 260px; height: 42px;
}
.src-group .src-wrap button {
    width: 100px; height: 40px;
    color: #fff;
    border-radius: 3px;
    background: #718f6a;
}
.src-group .src-result .co-tit-group button {position: relative;}
.src-group .src-result .co-tit-group button span {
    display: inline-block;
    width: 12px; height: 2px;
    margin-left: 6px;
    background: #fff;
    vertical-align: 5px;
}
.src-group .src-result .co-tit-group button span:last-child {
    position: absolute;
    top: 50%; right: 18px; transform: translateY(-50%);
    width: 2px; height: 12px;
}
.src-group .src-result .co-tit-group button.btn-hide span:last-child {display: none;}
.src-group .table-wrap th,
.src-group .table-wrap td {height: 42px;}
.src-group .table-wrap td {
    padding-left: 0;
    text-align: center;
    cursor: pointer;
}
.src-group .table-wrap td.db_height {
	height: 84px;
	cursor: default;
}
.src-group .table-wrap tbody tr:hover td {color: rgba(30,30,30,.45);}
.src-group .table-wrap {
    height: 168px;
    overflow-x: hidden;
    overflow-y: auto;
}
/* ===== 안치단 정보, 계약일자 확인 */
.coc-group .create-account-wrap {
    margin-top: 15px;
    float: right;
    color: #fff;
}
.coc-group .create-account-wrap input {
    width: 18px; height: 18px;
    margin-right: 7px;
    border: 0;
    border-radius: 3px;
    vertical-align: -3px;
}
.coc-group .create-account-wrap label {font-size: 1.6rem;}
.info-group {margin: 30px 0;}
.info-group .table-wrap td p.result {
    width: 270px; height: 32px;
    line-height: 29px;
    border: 1px solid #ccc;
    text-align: center;
}
.info-group .table-wrap td p.result.bold {font-weight: 700;}
.info-group .table-wrap select {
    width: 270px;
    background-image: url(/resources/images/icon-select-arrow-grey.png);
    text-align: center;
}
.info-group .table-wrap input[type="number"],
.info-group .table-wrap input[type="date"] {
    position: relative;
    width: 270px;
    text-align: center;
}
.info-group .table-wrap input[type="date"].write {
    border: 2px solid #388f9e;
    border-radius: 5px;
}
.info-group .table-wrap #date_pick.write:after {
    position: absolute;
    top: 50%; right: 0; transform: translate(106%,-50%);
    padding: 6px 0;
    width: 220px;
    content: '계약 만료일을 설정해주세요';
    background: #ebfffe;
    border: 1px solid #98e2f3;
	z-index: 9;
}
/* ===== 계약자 인적사항 */
.coc-group {
    float: left;
    width: 597px;
}
.flat-box .flat-right-group {
    float: right;
    width: 577px;
}
.coc-group .id-numb input[type="number"] {width: 100px;}
.coc-group .id-numb span {
    display: inline-block;
    margin: 0 5px;
    font-size: 1.8rem; color: #aeaeae;
    font-weight: 700;
}
.coc-group .address .zip-code {width: 170px;}
.coc-group .address .btn-src-code {
    margin-left: 6px;
    width: 90px; height: 32px;
    color: #fff;
    background: #288c9e;
}
.coc-group .address .detail-add {
    display: block;
    width: 420px;
    margin-top: 5px;
}
/* ===== 고인정보 */
.dcs-group .co-tit-group .btn-down {
    margin-left: 10px;
    color: #388f9e;
    background: #fff;
}
.dcs-group .table-wrap {
    height: 138px;
    background: #fff;
    overflow: hidden;
    overflow-y: auto;
}
.dcs-group td {
    text-align: center;
    cursor: pointer;
}
.dcs-group table tr:last-child td {border-bottom-width: 1px;}
.dcs-group table tbody tr td {padding-left: 0;}
.dcs-group table tbody tr:hover td {color: rgba(30,30,30,.45);}

/* ===== 관리비 */
.fee-group .table-wrap {
    height: 92px;
    background: #fff;
    border-bottom: 1px solid #999;
}
.fee-group th span {font-weight: 400;}
.fee-group td input {
    display: inline-block;
    width: 130px;
    background: #f8f8f8;
    vertical-align: middle;
}
.fee-group td .fee-alert {
    position: relative;
    display: inline-block;
    margin-left: 32px;
    font-size: 1.4rem; color: #666;
    vertical-align: middle;
}
.fee-group td .fee-alert:before {
    position: absolute;
    content: '';
    top: 56%; left: -20px; transform: translateY(-50%);
    width: 16px; height: 14px;
    background: url(/resources/images/icon-warn-30days.png) no-repeat center/contain;
    vertical-align: middle;
}
.fee-group td .fee-alert:after {
    position: absolute;
    bottom: -5px; left: 0;
    content: '';
    width: 100%; height: 10px;
    background: #fe8e3c;
    opacity: 0.1;
}
.fee-group td .fee-alert b {color: #fe8e3c;}
.fee-group td .fee-alert.fee-7days:before {background-image: url(/resources/images/icon-warn-7days.png);}
.fee-group td .fee-alert.fee-7days:after {background: #f3696d;}
.fee-group td .fee-alert.fee-7days b {color: #f3696d;}
.fee-group tbody tr:last-child td {border-bottom-width: 1px;}
/* ===== 계약정보 */
.cont-info-group {margin: 30px 0 20px;}
.cont-info-group select {
    width: 220px;
    background-image: url(/resources/images/icon-select-arrow-grey.png);
}
.cont-info-group input {width: 220px;}
.cont-info-group th {width: 149px;}
.cont-info-group td {width: 249px;}
.cont-info-group td.th_width {width: 149px;}
.cont-info-group td input[type="date"] {
	margin-right: 6px;
	vertical-align: 0;
}
.cont-info-group tbody tr:last-child td {border-bottom-width: 1px;}
/* ===== 계약금 및 잔금내역 */
.pay-group {
    float: left;
    width: 796px;
    border-bottom: 1px solid #999;
}
.pay-group .co-tit-group button {
    position: relative;
    float: left;
    margin-left: 14px;
}
.pay-group .co-tit-group button span {
    display: inline-block;
    width: 12px; height: 2px;
    margin-left: 6px;
    background: #fff;
    vertical-align: 5px;
}
.pay-group .co-tit-group button span:last-child {
    position: absolute;
    top: 50%; right: 18px; transform: translateY(-50%);
    width: 2px; height: 12px;
}
.pay-group .unpaid-box {
    height: 46px;
    padding: 14px 20px 15px;
    background: #718f6a;
}
.pay-group .unpaid-box p {font-size: 1.6rem; color: #fff;}
.pay-group .unpaid-box p b {padding-right: 86px;}
.pay-group .table-wrap {
    max-height: 184px;
    overflow-y: auto;
    overflow-x: hidden;
}
.pay-group th,
.pay-group td {border-right: 1px solid #ccc;}
.pay-group td input {width: 170px;}
.pay-group tbody tr:last-child th,
.pay-group tbody tr:last-child td {border-bottom-width: 0px;}
.pay-group th .btn-delete {
    position: relative;
    width: 14px; height: 14px;
    background: #f3696d;
    border-radius: 100%;
    vertical-align: -3px;
    text-indent: -9999px;
    overflow: hidden;
}
.pay-group th .btn-delete:after {
    position: absolute;
    content: '';
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 8px; height: 2px;
    background: #fff;
}
/* ===== 개방내역 관리 */
.open-group {
    float: right;
    width: 378px;
}
.open-group .dateInner {
    position: relative;
    height: 230px;
    padding: 30px 32px 0;
    background: #59b5d3 url(/resources/images/bg-oepn-adm.png) no-repeat 150% -30%;
}
.open-group .dateInner .open-date {
    position: relative;
    padding-left: 18px;
    color: #fff;
    font-weight: 700;
}
.open-group .dateInner .open-date:before {
    position: absolute;
    content: '';
    top: 0; left: 0;
    width: 5px; height: 100%;
    background: #fff;
}
.open-group .dateInner .open-date span {font-size: 2rem;}
.open-group .dateInner .open-date p {
    margin-top: 8px;
    font-size: 3rem;
    letter-spacing: -0.1rem;
}
.open-group .dateInner .btn-open-window {
    position: absolute;
    bottom: 24px; right: 26px;
    width: 110px; height: 32px;
    font-size: 1.6rem; color: #59b5d3;
    line-height: 31px;
    font-weight: 700;
    text-align: center;
    background: #fff;
    border-radius: 14px;
}
.open-group .dateInner .date-alert {
    margin: 10px 0 18px;
    font-size: 1.3rem; color: #fff;
}
.open-group .dateInner .total-open {
    position: relative;
    display: inline-block;
    font-size: 1.8rem; color: #fff;
    z-index: 2;
}
.open-group .dateInner .total-open:before {
    position: absolute;
    content: '';
    bottom: -4px; left: 0;
    width: 100%; height: 10px;
    background: rgba(255,255,255,.2);
    z-index: -1;
}
.total-btn-group {
    margin-top: 35px;
    text-align: right;
}
.total-btn-group .btn-wrap {
    display: inline-block;
    text-align: center;
}
.total-btn-group button {
    width: 160px; height: 54px;
    font-size: 1.6rem; color: #666;
    background: #fff;
    border: 1px solid #ccc;
}
.total-btn-group .btn-write {
    margin-left: 16px;
    color: #fff;
    background: #718f6a;
}
/* ===== 수목장 */
/*.sale-arb-wrap .dcs-group .table-wrap {height: 92px;}*/
.sale-arb-wrap .fee-group .table-wrap {height: 92px;}
.sale-arb-wrap .plc-group {
    margin-bottom: 14px;
    height: 72px;
    border: 1px solid #718f6a;
    border-radius: 3px;
    background: #fff;
}
.sale-arb-wrap .plc-group .img-wrap {
    position: relative;
    float: left;
    width: 72px; height: 72px;
    background: #718f6a;
    border-radius: 3px;
}
.sale-arb-wrap .plc-group .img-wrap img {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.sale-arb-wrap .plc-group .cont-wrap {
    float: left;
    width: calc(100% - 72px);
    padding-top: 21px;
    text-align: center;
}
.sale-arb-wrap .plc-group .cont-wrap * {
    display: inline-block;
    vertical-align: middle;
}
.sale-arb-wrap .plc-group .cont-wrap h4 {font-size: 2.2rem; color: #718f6a;}
.sale-arb-wrap .plc-group .cont-wrap p {
    position: relative;
    padding-top: 2px;
    margin-left: 10px;
    font-size: 1.8rem;
}
.sale-arb-wrap .plc-group .cont-wrap p:after {
    position: absolute;
    content: '';
    width: 102%; height: 11px;
    bottom: -4px; left: 50%; transform: translateX(-50%);
    background: rgba(159,199,67,.2);
}
.sale-arb-wrap .last-update {position: relative;}
.sale-arb-wrap .last-update sup span {
    position: relative;
    display: inline-block;
    font-size: 1rem; color: #666;
    margin-left: 3px;
    cursor: pointer;
    z-index: 2;
}
.sale-arb-wrap .last-update sup span:after {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    content: '';
    width: 13px; height: 13px;
    background: #fff;
    border-radius: 100%;
    border: 1px solid #999;
    z-index: -1;
}
.sale-arb-wrap .last-update sup:hover + .dsc-date {display: block;}
.sale-arb-wrap .last-update .dsc-date {
    display: none;
    position: absolute;
    left: 206px; top: 14px;
    padding: 6px 9px;
    width: 266px; height: 48px;
    font-size: 1.4rem; color: #525252;
    font-weight: 400;
    line-height: 16px;
    background: #fff;
    border: 1px solid #c3c3c3;
    text-align: left;
    z-index: 9;
}
.sale-arb-wrap .btn-change-treeOrder {
	width: 66px; height: 22px;
	margin-left: 3px;
	font-size: 1.4rem; color: #fff;
	background: #718f6a;
	border-radius: 5px;
}

/* =============================
    분양 관리/안치단 관리 공통 표 - 수목장
============================== */
.arb-main {float: left;}
.arb-wrap {
    float: right;
    width: 340px;
    margin-top: 74px;
}
.arb-wrap .arb-tree-group .tree-select {
    position: relative;
    width: 320px; height: 320px;
    margin: 0 auto;
    background: #e1e1e1 url(/resources/images/img-tree-line.png) no-repeat center/contain;
    border: 15px solid #c8ccc1;
    border-radius: 100%;
}
.arb-wrap .arb-tree-group .tree-img {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 200px; height: 200px;
    background: #b0b98b;
    border: 10px solid #f2f2f2;
    border-radius: 100%;
}
.arb-wrap .arb-tree-group .tree-img img {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.arb-wrap .arb-tree-group .tree-select ul {
    width: 96%;
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(100deg);
}
.arb-wrap .arb-tree-group .tree-select li button {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px; height: 36px;
    font-size: 1.4rem; color: #fff;
    background: #829781;
    border: 3px solid #fff;
    border-radius: 100%;
    cursor: pointer;
    z-index: 2;
    background: #bababa;
}
    .arb-wrap .arb-tree-group .tree-select li button.selected {background: #829781;}
    .arb-wrap .arb-tree-group .tree-select li:nth-child(2) button.selected {background: #69887a;}
    .arb-wrap .arb-tree-group .tree-select li:nth-child(3) button.selected {background: #498785;}
    .arb-wrap .arb-tree-group .tree-select li:nth-child(4) button.selected {background: #42696c;}
    .arb-wrap .arb-tree-group .tree-select li:nth-child(5) button.selected {background: #2f7c8c;}
    .arb-wrap .arb-tree-group .tree-select li:nth-child(6) button.selected {background: #365863;}
    .arb-wrap .arb-tree-group .tree-select li:nth-child(7) button.selected {background: #3d608f;}
    .arb-wrap .arb-tree-group .tree-select li:nth-child(8) button.selected {background: #2f4858;}
    .arb-wrap .arb-tree-group .tree-select li:nth-child(9) button.selected {background: #2b4b75;}
    .arb-wrap .arb-tree-group .tree-select li:nth-child(10) button.selected {background: #646e8e;}
    .arb-wrap .arb-tree-group .tree-select li:nth-child(11) button.selected {background: #966caa;}
    .arb-wrap .arb-tree-group .tree-select li:nth-child(12) button.selected {background: #8b739d;}
.arb-wrap .tree-selected {
    width: 340px;
    margin-top: 45px;
    padding: 25px 0;
    background: #29231c;
    text-align: center;
}
.arb-wrap .tree-selected span {
    display: inline-block;
    font-size: 1.6rem; color: #525252;
    font-weight: 700;
    padding: 6px 7px 6px 7px;
    background: #f1f1f1;
    border-radius: 6px;
    vertical-align: 2px;
}
.arb-wrap .tree-selected p {
    display: inline-block;
    margin-left: 7px;
    font-size: 2.4rem; color: #fff;
    font-weight: 700;
}
.arb-wrap .position-select .tree-position {
    float: left;
    width: 170px;
    background: #fff;
    border: 1px solid #ccc;
    border-width: 0 1px 1px 0;
}
.arb-wrap .tree-position:nth-child(2n-1) {border-left-width: 1px;}
.arb-wrap .tree-position .tit-group {
    padding: 14px 0 15px;
    text-align: center;
    border-bottom: 1px solid #ccc;
}
.arb-wrap .tree-position .tit-group p {
    display: inline-block;
    margin-right: 16px;
    font-size: 1.6rem; color: #97a365;
    font-weight: 700;
}
.arb-wrap .tree-position .tit-group span {
    display: inline-block;
    width: 22px; height: 22px;
    padding-top: 3px;
    font-size: 1.4rem; color: #fff;
    background: #829781;
    border-radius: 5px;
}
.arb-wrap .tree-position .name-group {
    padding: 18px 0 18px 26px;
    font-size: 1.6rem; color: #666;
    height: 78px;
    cursor: pointer;
}
.arb-wrap .tree-position .name-group p:last-child {margin-top: 8px;}
.arb-wrap .tree-position.po2 .tit-group .numb {background: #69887a;}
.arb-wrap .tree-position.po3 .tit-group .numb {background: #498785;}
.arb-wrap .tree-position.po4 .tit-group .numb {background: #42696c;}
.arb-wrap .tree-position.po5 .tit-group .numb {background: #2f7c8c;}
.arb-wrap .tree-position.po6 .tit-group .numb {background: #365863;}
.arb-wrap .tree-position.po7 .tit-group .numb {background: #3d608f;}
.arb-wrap .tree-position.po8 .tit-group .numb {background: #2f4858;}
.arb-wrap .tree-position.po9 .tit-group .numb {background: #2b4b75;}
.arb-wrap .tree-position.po10 .tit-group .numb {background: #646e8e;}
.arb-wrap .tree-position.po11 .tit-group .numb {background: #966caa;}
.arb-wrap .tree-position.po12 .tit-group .numb {background: #8b739d;}
/* ============= 개인목 */
.arb-wrap .ind .tree-position .tit-group p {color: #fff;}
.arb-wrap .ind .tree-position .tit-group .numb {
    color: #191919;
    background: #fff;
}
.arb-wrap .ind .tree-position .tit-group {background: #829781;}
.arb-wrap .ind .tree-position.po2 .tit-group {background: #69887a;}
.arb-wrap .ind .tree-position.po3 .tit-group {background: #498785;}
.arb-wrap .ind .tree-position.po4 .tit-group {background: #42696c;}
.arb-wrap .ind .tree-position.po5 .tit-group {background: #2f7c8c;}
.arb-wrap .ind .tree-position.po6 .tit-group {background: #365863;}
.arb-wrap .ind .tree-position.po7 .tit-group {background: #3d608f;}
.arb-wrap .ind .tree-position.po8 .tit-group {background: #2f4858;}
.arb-wrap .ind .tree-position.po9 .tit-group {background: #2b4b75;}
.arb-wrap .ind .tree-position.po10 .tit-group {background: #646e8e;}
.arb-wrap .ind .tree-position.po11 .tit-group {background: #966caa;}
.arb-wrap .ind .tree-position.po12 .tit-group {background: #8b739d;}
/* ============= 부부목 */
.arb-wrap .cop .tree-position:nth-child(2n-1) {border-right-width: 0px;}
.arb-wrap .cop .tree-position:nth-child(2n-1) .name-group {border-right: 1px solid #ccc;}
.arb-wrap .cop .tree-position .tit-group p {color: #fff;}
.arb-wrap .cop .tree-position .tit-group .numb {
    color: #191919;
    background: #fff;
}
.arb-wrap .cop .tree-position .tit-group {background: #829781;}
.arb-wrap .cop .tree-position.po3 .tit-group,
.arb-wrap .cop .tree-position.po4 .tit-group {background: #5b7e76;}
.arb-wrap .cop .tree-position.po5 .tit-group,
.arb-wrap .cop .tree-position.po6 .tit-group {background: #4e7f83;}
.arb-wrap .cop .tree-position.po7 .tit-group,
.arb-wrap .cop .tree-position.po8 .tit-group {background: #3a5e67;}
.arb-wrap .cop .tree-position.po9 .tit-group,
.arb-wrap .cop .tree-position.po10 .tit-group {background: #646e8e;}
.arb-wrap .cop .tree-position.po11 .tit-group,
.arb-wrap .cop .tree-position.po12 .tit-group {background: #8b739d;}
/* ======= 모달창 UI */
#modal-wrap {position: relative;}
.sale-arb-wrap #modal {
    position: absolute;
    top: 0; left: 0;
    padding-top: 120px;
    width: 100%; height: 100%;
    background: rgba(0,0,0,.85);
    border-radius: 3px;
    text-align: center;
    z-index: 9;
}
.sale-arb-wrap #modal p {
    margin-top: 20px;
    font-size: 1.8rem; color: #fff;
    font-weight: 300;
    line-height: 1.4;
    white-space: pre-line;
}
.sale-arb-wrap #modal.co-tree-modal {
    top: -168px;
    height: calc(100% + 168px);
}
#modal-wrap.flat-right-group #modal {
    top: 46px;
    padding-top: 28px;
    height: 138px;
}
#modal-wrap.flat-right-group #modal img {
    display: inline-block;
    width: 60px;
    vertical-align: middle;
}
#modal-wrap.flat-right-group #modal p {
    display: inline-block;
    margin-left: 21px;
    vertical-align: -20px;
    text-align: left;
}
/* =============================
    안치단 관리 - 봉안당
============================== */
.space-wrap .now-wrap p.tit {
    display: inline-block;
    font-size: 3rem; color: #525252;
    font-weight: 700;
    vertical-align: middle;
}
.space-wrap .now-wrap select {
    display: inline-block;
    width: 180px; height: 42px;
    margin: 0 18px 0 20px;
    vertical-align: middle;
}
.space-wrap .now-wrap a {
    position: absolute;
    top: 8px;
    right: 18px;
    width: 106px;
    height: 32px;
    font-size: 1.6rem;
    color: #fff;
    display: inline-block;
    background: #388f9e;
    border-radius: 4px;
    text-align: center;
    align-content: center;
}
.space-wrap .now-wrap a img {
    display: inline-block;
    margin-left: 5px;
    vertical-align: -1px;
}
/* ============= 통계 */
.space-wrap .statistics-wrap {margin: 40px 0 60px;}
.space-wrap .statistics-wrap table {
    border-top: 1px solid #29231c;
}
.space-wrap .statistics-wrap th, td {
    height: 48px;
    font-size: 1.6rem;
}

.space-wrap .statistics-wrap th[colspan="7"],
.space-wrap .statistics-wrap th[colspan="9"],
.space-wrap .statistics-wrap th[colspan="11"] {
    color: #fff;
    background: #29231c;
}
.space-wrap .statistics-wrap .sub-th th {
    color: #fff;
    border-right: 1px solid #929292;
    background: #bcbcbc;
}
.space-wrap .statistics-wrap .detail-th th {
    color: #525252;
    font-weight: 400;
    border-right: 1px solid #b6b6b6;
    background: #f7f7f7;
}
.space-wrap .statistics-wrap .detail-th span {
    display: inline-block;
    width: 20px; height: 20px;
    margin-right: 6px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 3px;
    vertical-align: -4px;
}
    .space-wrap .statistics-wrap .detail-th span.temp {background: #9fccd8;}
    .space-wrap .statistics-wrap .detail-th span.empty {background: #FF6F61;}
    .space-wrap .statistics-wrap .detail-th span.ind-full {background: #333c53;}
    .space-wrap .statistics-wrap .detail-th span.cop-half {background: #d6e0a1;}
    .space-wrap .statistics-wrap .detail-th span.cop-full {background: #53b257;}
    .space-wrap .statistics-wrap .detail-th span.ind-fam-half {background: #f9eec4;}
    .space-wrap .statistics-wrap .detail-th span.ind-fam-full {background: #ffdd5a;}
    .space-wrap .statistics-wrap .detail-th span.cop-fam-one {background: #d7cff7;}
    .space-wrap .statistics-wrap .detail-th span.cop-fam-two {background: #b6a5f5;}
    .space-wrap .statistics-wrap .detail-th span.cop-fam-three {background: #886ee8;}
    .space-wrap .statistics-wrap .detail-th span.cop-fam-full {background: #673ab7;}
.space-wrap .statistics-wrap td {
    height: 48px;
    border-right: 1px solid #b6b6b6;
    text-align: center;
}
.space-wrap .statistics-wrap .detail-th th:last-child,
.space-wrap .statistics-wrap .sub-th th:last-child,
.space-wrap .statistics-wrap td:last-child {border-right-width: 0px;}
/* ============= 안치표 */
.space-wrap .space-table .head {
    position: relative;
    margin-bottom: 49px;
    font-size: 1.6rem; color: #fff;
    border-bottom: 1px solid #29231c;
}
.space-wrap .space-table .head .tit {
    width: 204px; height: 48px;
    line-height: 47px;
    background: #29231c;
    text-align: center;
}
.space-wrap .space-table .head button {
    position: absolute;
    right: 0; bottom: 8px;
    width: 140px; height: 40px;
    color: #fff;
    font-weight: 300;
    border-radius: 3px;
    background: #718f6a;
}
.space-wrap .space-table.get-full {width: calc(100vw - 365px);}
.space-wrap .space-table.get-full table {width: 100%;}
.space-wrap .space-table table {width: auto;}
.space-wrap .space-table table:nth-child(n+2) {margin-top: 30px;}
.space-wrap .space-table thead th {
    height: 32px;
    font-size: 1.6rem; color: #fff;
    font-weight: 400;
    background: #333;
}
.space-wrap .space-table tbody th {
    width: 37px; height: 68px;
    font-size: 1.6rem;
    background: #d6d6d6;
    border-bottom: 2px solid #fff;
}
.space-wrap .space-table tr:last-child th {border-bottom-width: 0px;}
.space-wrap .space-table td {
    width: 37px; height: 70px;
    font-size: 1.4rem;
    border: 1px solid #757575;
    border-width: 0 1px 1px 0;
    background: white;
    text-align: center;
    cursor: pointer;
}
.space-wrap .space-table th + td,
.space-wrap .space-table td.none + td {border-left: 1px solid #757575;}
.space-wrap .space-table td span {
    display: block;
    width: 17px; height: 17px;
    margin: 0 auto 5px;
    border-radius: 3px;
    background: rgba(255,255,255,.5);
    border: 1px solid #858585;
}
.space-wrap .space-table td.temp {background: #cdd8db;}
.space-wrap .space-table td.empty {background: #fff;}
.space-wrap .space-table td.ind-full {
    color: #fff;
    background: #333c53;
}
.space-wrap .space-table td.cop-half {background: #d6e0a1;}
.space-wrap .space-table td.cop-full {
    color: #fff;
    background: #db9447;
}
.space-wrap .space-table td.cop-full span {color: #252525;}
.space-wrap .space-table .none {
    background: none;
    border: 0px;
    cursor: default;
}
/* =============================
    안치단 관리 - 수목장
============================== */
.space-wrap.space-arb .statistics-wrap table * {border-color: #ccc;}
.space-arb .statistics-wrap table th.left {
    color: #191919;
    font-weight: 400;
    background: #e1e1e1;
}
.space-arb .statistics-wrap .sub-th th,
.space-arb .statistics-wrap .sub-td td {
    color: #191919;
    font-weight: 400;
    background: #f7f7f7;
}
.space-arb .statistics-wrap .sub-th span {
    display: inline-block;
    margin-right: 2px;
    width: 20px; height: 20px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    vertical-align: -4px;
}
    .space-arb .statistics-wrap .sub-th span.fam {background: #efba75;}
    .space-arb .statistics-wrap .sub-th span.ind {background: #394871;}
    .space-arb .statistics-wrap .sub-th span.cop {background: #b0b97e;}
    .space-arb .statistics-wrap .sub-th span.spc {background: #ffbd33;}
.space-arb .space-table table {
    border: 1px solid #adadad;
    border-width: 1px 0 0 1px;
}
.space-arb .space-table td {
    width: 119px; height: 119px;
    background: #fff;
    border-color: #adadad;
}
.space-arb .space-table td .numb {
    width: 34px; height: 24px;
    margin: 0 auto;
    font-size: 1.6rem; color: #fff;
    font-weight: 700;
    line-height: 23px;
    background: #999;
    border: none;
}
.space-arb .space-table td .name {
    display: inline-block;
    margin: 6px 8px;
    padding: 3px 8px 5px;
    min-width: 60px;
    font-size: 1.6rem; color: #999;
    border: 1px solid;
    background: #fff;
    border-radius: 10px;
}
.space-arb .space-table td .count {font-size: 1.7rem; color: #999;}
    /* ======= 공통 */
    .space-arb .space-table :is(.fam, .ind, .cop, .spc) .numb {border: 1px solid #fff;}
    .space-arb .space-table .fam .count,
    .space-arb .space-table .cop .count {color: #333;}
    /* ======= 가족목 */
    .space-arb .space-table .fam {background: #ecab65;}
    .space-arb .space-table .fam .numb {background: #e29735;}
    .space-arb .space-table .fam .name {color: #a36d26;}
    /* ======= 개인공동목 */
    .space-arb .space-table .ind {background: #394871;}
    .space-arb .space-table .ind .numb {background: #202e53;}
    .space-arb .space-table .ind .name {color: #202e53;}
    .space-arb .space-table .ind .count {color: #fff;}
    /* ======= 부부공동목 */
    .space-arb .space-table .cop {background: #b0b97e;}
    .space-arb .space-table .cop .numb {background: #747e47;}
    .space-arb .space-table .cop .name {color: #747e47;}
    /* ======= 특별목 */
    .space-arb .space-table .spc {background: #ffbd33;}
    .space-arb .space-table .spc .numb {background: #e3a21b;}
    .space-arb .space-table .spc .name {color: #d79712;}
    .space-arb .space-table .spc .count {color: #fff;}

/* =============================
    수목장 선택 모달
============================== */
#modal-tree {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,.7);
    z-index: 99;
}
#modal-tree .steps {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    background: #fff;
    border-radius: 7px;
}
#modal-tree .steps .header {
    position: relative;
    height: 74px;
    border-bottom: 1px solid #eaeaea;
}
#modal-tree .steps .header p.tit {
    padding-top: 24px;
    font-size: 2.4rem; color: #525252;
    font-weight: 700;
    text-align: center;
}
#modal-tree .steps .header button {
    position: absolute;
    right: 26px; top: 22px;
    width: 30px; height: 30px;
    border: 1px solid #ccc;
}
#modal-tree .steps .header button span {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg);
    width: 16px; height: 2px;
    background: #29231c;
}
#modal-tree .steps .header button span:last-child {transform: translate(-50%,-50%) rotate(-45deg);}
#modal-tree #step1 {
    width: 580px; height: 335px;
    text-align: center;
}
#modal-tree #step1 .modal-cont {padding-top: 24px;}
#modal-tree #step1 ul {display: inline-block;}
#modal-tree #step1 ul li {float: left;}
#modal-tree #step1 ul li.unselect {opacity: 0.4;}
#modal-tree #step1 ul li:nth-child(n+2) {margin-left: 10px;}
#modal-tree #step1 input[type="radio"] {visibility: hidden;}
#modal-tree #step1 input[type="radio"]:checked {
    width: 0; height: 0;
    visibility: hidden;
}
#modal-tree #step1 label {
    display: block;
    padding-top: 29px;
    width: 120px; height: 120px;
    font-size: 1.6rem; color: #fff;
    background: #202e53;
    border-radius: 5px;
}
#modal-tree #step1 label img {
    display: block;
    margin: 0 auto 8px;
}
#modal-tree #step1 .cop label {background: #b0b97e;}
#modal-tree #step1 .fam label {background: #e2a066;}
#modal-tree #step1 .spc label {background: #ffbd33;}
#modal-tree #step1 select {
    display: block;
    margin: 26px auto 0;
    width: 420px; height: 38px;
    text-align: center;
}
#step2 {
    display: none;
    width: 650px; height: 465px;
}
#step2 .arb-wrap {
    float: none;
    width: auto;
    margin: 0;
}
#step2 .modal-cont {padding: 25px 35px 0;}
#step2 .modal-cont .left-cont {float: left;}
#step2 .modal-cont .left-cont p.guide {font-size: 1.6rem; color: #999;}
#step2 .modal-cont .left-cont .now-tree {
    width: 200px;
    margin: 18px 0 174px;
    text-align: center;
}
#step2 .modal-cont .left-cont .now-tree p.tit {
    font-size: 1.6rem; color: #fff;
    font-weight: 700;
    line-height: 41px;
    background: #555;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
#step2 .modal-cont .left-cont .now-tree p.cont {
    font-size: 1.6rem;
    padding: 12px 0 14px;
    border: 1px solid #ddd;
    border-top-width: 0px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
#step2 .modal-cont .left-cont .now-tree p.cont img {padding: 0 7px;}
#step2 .modal-cont .left-cont .btn-modal-prev {
    width: 120px; height: 42px;
    color: #fff;
    background: #388f9e;
    border-radius: 5px;
}
#step2 .modal-cont .left-cont .btn-modal-prev img {
    display: inline-block;
    vertical-align: middle;
}
#step2 .modal-cont .right-cont {
    float: right;
    width: 320px;
}

/* =============================
    관리비 경과 팝업
============================== */
#fee-over-pop {
    position: fixed;
    bottom: 0; right: 0;
    width: calc(100vw - 270px); height: calc(100vh - 74px);
    background: rgba(0,0,0,.6);
    z-index: 99;
}
#fee-over-pop .inner-group {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-74%,-70%);
    padding-top: 42px;
    width: 560px; height: 319px;
    color: #313131;
    background: #ff9104;
    text-align: center;
    border-radius: 16px;
}
#fee-over-pop .inner-group p {
    margin: 19px 0 22px;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: pre-line;
}
#fee-over-pop .inner-group button {
    width: 186px; height: 41px;
    font-size: 1.6rem;
    border: 1px solid #313131;
}
#fee-over-pop .inner-group button:hover {
    color: #fff;
    background: #313131;
    transition: .2s;
}

/* =============================
    Quick Memo
============================== */
#quick-memo-group {
    position: fixed;
    display: flex;
    bottom: 5.5vh; left: 316px;
    align-items: flex-start;
    z-index: 2;
}
#quick-memo-group .quick-wrap {
    width: 624px;
    padding: 19px 25px 25px;
    background: #e7eaed;
    border-radius: 30px;
    box-shadow: 0px 0px 27.6px 2.4px rgba(5, 30, 61, 0.11);
}
#quick-memo-group .btn-close {
    width: 46px; height: 46px;
    background: url(/resources/images/btn-quick-close.png) no-repeat center/contain;
    text-indent: -9999px;
}
#quick-memo-group .tit {
    display: flex;
    padding: 12px 21px 12px 28px;
    border-radius: 24px;
    background: #fff;
    align-items: center;
    justify-content: space-between;
}
#quick-memo-group .tit img {
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}
#quick-memo-group .tit span {font-size: 1.6rem;}
#quick-memo-group .tit p.name {
    width: 116px; height: 36px;
    font-size: 1.6rem; color: #fff;
    line-height: 35px;
    font-weight: 700;
    background: #409bf9;
    text-align: center;
    border-radius: 16px;
}
#quick-memo-group .table-wrap {
    height: 280px;
    margin: 21px 0 8px;
    overflow-y: auto;
    overflow-x: hidden;
}
#quick-memo-group .table-wrap table {border-spacing: 0 7px;}
#quick-memo-group .table-wrap th {
    height: 34px;
    font-size: 1.6rem;
    font-weight: 700;
}
#quick-memo-group .table-wrap td {
    padding: 16px 0;
    font-size: 1.5rem;
    line-height: 23px;
    background: #fff;
    white-space: pre-line;
    vertical-align: top;
    cursor: pointer;
}
#quick-memo-group .table-wrap td:first-child,
#quick-memo-group .table-wrap td:last-child {text-align: center;}
#quick-memo-group .table-wrap td:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
#quick-memo-group .table-wrap td:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
#quick-memo-group .table-wrap td .writer {display: block;}
#quick-memo-group .btn-write {
    width: 100%; height: 46px;
    margin-bottom: 23px;
    font-size: 1.6rem; color: #fff;
    font-weight: 700;
    background: #f4c31a;
    border-radius: 6px;
    text-align: center;
}
#quick-memo-group .write-wrap {
	margin-top: 20px;
	height: 54.91vh;
}
#quick-memo-group .write-wrap textarea {
    width: 100%; height: 46.91vh; /*300*/
    border-radius: 6px;
	background: #fff;
    resize: none;
}
#quick-memo-group .write-wrap .write-area {
	padding: 6px 11px;
	width: 100%; height: 46.91vh; /*300*/
	font-size: 1.6rem;
	line-height: 1.3;
	background: #fff;
    border-radius: 6px;
	outline: none;
}
#quick-memo-group .write-wrap p.alert {
	margin-top: 12px;
	font-size: 1.6rem;
}
#quick-memo-group .btn-save {
    float: right;
    margin-top: 15px;
    width: 146px; height: 42px;
    font-size: 1.6rem; color: #fff;
    font-weight: 700;
    border-radius: 3px;
    background: #409bf9;
}
#quick-memo-group .quick-wrap--etc {margin: 0 15px 0 21px;}
#quick-memo-group .quick-wrap--etc p.name {background: #969ca4;}
#quick-memo-group .quick-wrap--etc .write-wrap {margin-top: 20px;}
#quick-memo-group .quick-wrap--etc .write-wrap textarea {height: 46.91vh;}
#quick-memo-group {visibility: hidden;}
#quick-memo-group .quick-wrap,
#quick-memo-group .btn-close {
    visibility: hidden;
    opacity: 0.5;
    transform: translateX(-5%);
}
#quick-memo-group.active {visibility: visible;}
#quick-memo-group.active .quick-wrap,
#quick-memo-group.active .btn-close {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: .5s;
}
#quick-memo-group.active .quick-wrap--etc {transition-delay: .3s;}


/* =============================
    프린트 기능 사용 시 쿼리문
============================== */
@media print {
	#snb,
	.nav-wrap {display: none;}
	main {padding-top: 15px;}
	.main-wrap.co-area {
		margin: 10px;
		padding-bottom: 0;
		width: auto;
	}
	@page {
		margin: 0mm;
	}
}

/* 검색 결과 합계 스타일 */
.total-summary-wrap {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 15px 20px;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-summary-item {
  text-align: center;
  flex: 1;
}

.total-summary-label {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 5px;
  font-weight: 600;
}

.total-summary-value {
  font-size: 20px;
  color: #2c3e50;
  font-weight: 700;
}

.total-summary-value.amount {
  color: #27ae60;
}

/* 구분선 */
.total-summary-divider {
  width: 1px;
  height: 40px;
  background: #dee2e6;
  margin: 0 20px;
}

.table-wrap-mt {
    margin-top: 30px;
}
.new-table-wrap .table-wrap td{
    border-right: 1px solid #ccc;
}

.new-table-wrap .table-wrap{
    float: none;
}

.new-table-wrap .table-wrap td:last-child {
    border-right: none;
}

.new-table-wrap .table-wrap tr.total td{
    border-right: 1px solid #ccc;
    font-weight: 700;
    background: #e6e6e6;
}

.new-table-wrap .table-wrap tr.total td:last-child {
    border-right: none;
}