@charset "utf-8";

:root {
    --color-black: #191919;
    --color-darknavy : #182346;
    --color-navy:  #2E335D;
    --color-darkblue: #2E5CA0;
    --color-black: #191919;
    --color-gray: #666666;
    --color-lightblue: #1FC0EB;
    --color-red: #FF7474;
    --color-blue: #1F71EB;
    --bg-lightgray: #F6F6F9;
    --bg-navy: #374C70;
    --bg-bluegray: #EEF2F5;
}


.wvshadow-box {
	margin-bottom: 20px;
    padding: 30px 40px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0px 4px 14px 0px rgba(129, 162, 181, 0.25); 
}

/* =========== 버튼 =========== */
.wvbtn {
    min-width: 56px !important;
    display: inline-block !important;
    padding: 5px 8px !important;
    margin: 2px !important;
    font-size: 15px !important;
    text-align: center !important;
    line-height: 1.3 !important;
    border-radius: 5px !important;
    font-weight: 500 !important;
    transition: 0.3s !important;
    border: 1px solid transparent;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    font-family: 'NotoSansKR', sans-serif !important;
}

.wvbtn + .wvbtn {
	margin-left: 1px;
}

.dt-buttons>.btn + .wvbtn {
	margin-left: 1px;
}
.btn--default {
    background: var(--bg-lightgray) !important;
    color: #888993 !important;
    border: 1px solid #CBCED6 !important;
}

.btn--default a {
    color: #888993 !important;	
}

.btn--default:hover {
	background: #d2d2d9 !important;
}

.btn--primary {
    background: var(--color-blue) !important;
    color: #ffffff !important;
}

.btn--primary a {
	color: #ffffff !important;
}

.btn--primary:hover {
	background: #1654b1 !important;
}

.btn--red {
    background: var(--color-red) !important;
    color: #ffffff !important;
}

.btn--red a {
	color: #ffffff !important;
}

.btn--red:hover {
	background: #dd4251 !important;
}

.btn--secondary {
    border: 1px solid var(--color-blue) !important;
    background: #ffffff !important;
    color: var(--color-blue) !important;
}

.btn--secondary a {
    color: var(--color-blue) !important;
}

.btn--secondary:hover {
	background: #d7e5fb !important;
}

.btn--skyblue {
    background: var(--color-lightblue) !important;
    color: #ffffff !important;
}

.wvbtn:has(img) {
    min-width: auto;
    display: inline-flex;
    gap: 11px;
    align-items: center;
    padding: 8px 12px;
}

.btn--s {
	min-width: 47px;
    padding: 3px 4px;
    font-size: 12px;
}

/* =============== pagination =============== */
.wvPagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 30px;
}

.wvPagination .page-btn {
	width: 24px;
	height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
	padding: 5px;
}

.wvPagination .page-btn img {
    height: 100%;
    opacity: 0.3;
}

.wvPagination .page-btn.active img {
    opacity: 1;
}

.wvPagination .page-list {
    display: flex;
    gap: 6px;
    margin-bottom: 0;
}

.wvPagination .page-item {
    transition: 0.3s;
}

.wvPagination .page-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-white);
    font-weight: 700;
    color: #9E9E9E;
}

.wvPagination .page-item.active a {
    background-color: var(--color-blue);
    color: #fff;
}

.wvPagination img {
    vertical-align: middle;
}

/* table */
.tableTopBox {font-size: 14px; width: 100%;  min-height: 35px;}
.tableTopBoxL {float: left; font-size:14px;}
.tableTopBoxR {float: right; font-size:14px;}
.tableTopTxt {display: inline-block; margin-top: 10px;}
.tableTopTxt2 {font-size:13px; padding-left:10px;}

.table_normal {width: 100%; border-top: 2px solid #073C8A; border-bottom: 1px solid #E7EBF4; border-spacing: 0; border-collapse: collapse; table-layout:fixed}
.table_normal.ac {text-align: center;}
.table_normal th {background-color: #F8FAFF; border-bottom: 1px solid #E7EBF4;color: #182346; font-weight:500; padding: 10px 0px; text-align: center;}
.table_normal thead th:not(:last-child) {border-right: 1px solid #E7EBF4;}
.table_normal tbody th, .table_normal tbody td:not(:last-child) {border-right: 1px solid #E7EBF4;}
.table_normal tbody td {color: #191919; border-bottom: 1px solid #E7EBF4; padding: 6px 10px; transition: 0.3s all;}
.table_normal thead tr th a.up.on {    color: #FF7474;}
.table_normal thead tr th a.down.on {    color: #1F71EB;}
.table_normal tbody tr td a:not([class*='bu_']):hover,
.table_normal tbody tr td a:not([class*='btn']):hover {color: #1F71EB;}
.table_normal .link {color: #1F71EB; text-decoration: underline;}

.searchBox .flex-search-group {
	display: flex; 
	flex-wrap: wrap;
	column-gap: 30px;
	row-gap: 10px;
}

.searchBox .flex-search-group > li {
	min-width: 30%;
	margin-right: 0;
}

.searchBox .flex-search-group .formGroup {
		display: flex;
	align-items: center;
}
.searchBox select {
	min-width: 100px;
}
.searchBox select + select {
	margin-left: 10px;
}

.searchBox .flex-search-group .formGroup .labelT {
	width: 108px;
 	text-align: left;
 }
 
/* state__group */
.state__group {
	margin-bottom: 20px;
}
.state__group ul {
	display: flex;
	align-items: center;
	gap: 20px;
}

.state__group .state__item {
	height: 80px;
	flex-grow: 1;
	display: flex;
	align-items: center;
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 10px;
	text-align: center;
	overflow: hidden;
}

.state__group .title {
	width: 44%;
	height: 100%;
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	background: #2E5CA0;
	color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.state__group .text {
	height: 100%;
	margin: 0;
	font-size: 24px;
	font-weight: 500;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 피해자정보 조회 */
.target-search-wrap {
	padding: 50px 30px;
}

.target-search-group {
	text-align: center;
}

.target-search-group label {
	font-weight: 500;
	font-size: 16px;
	margin: 5px 10px;
}

.target-search-group input.inbox {
	height: 35px;
	padding: 8px;
	font-size: 16px;
}

.target-search-group .wvbtn {
	font-size: 18px !important;
    margin-left: 10px !important;
	padding: 5px 14px !important;
}

.target--title {
	color: #2E335D;
    font-weight: 500;
    font-size: 22px;
    margin-bottom: 20px;
}

.target-search-wrap th, .target-search-wrap td {
	font-size: 16px;
}

/* ================= 모달 ================= */
.modal {
    position: fixed;
    background: rgba(0, 0, 0, .7);
    width: 100%;
    height: 100%;
    z-index: 112222222;
    top: 0;
    left: 0;
    display: none;
}

.modal.on {
    display: block;
}

.modal-box {
    position: fixed;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    width: 600px;
    padding: 0 20px;
    min-height: 588px;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25);
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 0;
}

.modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #2E335D;
}

.modal-close-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 5px 10px;
    background: url("/relief/css/adm/images/icon-popup-x.svg") no-repeat center / 18px;
}

.modal-body {
    flex: 1;
    overflow: auto;
}

.modal-foot {
    text-align: center;
    margin-top: 20px;
    padding: 20px 0;
    border-top: 1px solid #D7D7D7;
}

.sms-modal .modal-box {
    min-width: 400px;
}

.sms-modal select {
    width: 100%;
    height: 40px;
    margin: 5px 0;
    box-sizing: border-box;
}

.sms-modal textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.sms-modal .sms-num {
    margin-top: 5px;
}

.sms-modal .sms-num dl {
    display: flex;
    padding: 7px 5px;
    color: #111;
}

.sms-modal .sms-num dt {
    border-right: 1px solid #c8c8c8;
    padding-right: 12px;
    font-weight: 500;
}

.sms-modal .sms-num dd {
    padding-left: 12px;
}

.history-modal .modal-box {
    min-width: 600px;
}

.scroll-off {
    overflow: hidden;
    touch-action: none;
}

/* tab */
.tab-cont {
    display: none;
}

.tab-cont.on {
    display: block;
}

.tabWrap.type3 {
    margin: 10px 0;
    background: #f5f5f8;
    border-radius: 20px;
    font-size: 15px;
}
.tabWrap.type3 ul {
    display: flex;
}
.tabWrap.type3 li {
    min-width: 103px;
    box-shadow: none;
}
.tabWrap.type3 li a {
    display: block;
    width: 100%;
    padding: 8px 20px;
    color: #5d5f6a;
    border-radius: 20px;
    text-align: center;
    font-weight: 500;
    box-sizing: border-box;
}
.tabWrap.type3 li + li {
    margin-left: 10px;
}
.tabWrap.type3 li.on a {
    background: #1fc0eb;
    color: #fff;
}

.wvtab-list {
    display: flex;
    width: 100%;
    box-shadow: 0px 4px 14px rgba(129, 162, 181, 0.25);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px;
}

.wvtab-list li {
    flex-grow: 1;
    background: #ffffff;
}

.wvtab-list li a {
    display: block;
    padding: 6px 6px 11px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}

.wvtab-list li.active {
    background: #1FC0EB;
    color: #ffffff;
}

.wvtab-list li.active a {
    color: #ffffff;
}