@charset "utf-8";

.content-item > h2.title {width:100%; height:80px; line-height:80px; background-color:#fbfbfb; color:#000; font-weight:500;}
.content-item .back-link {position:relative; display:inline-block; padding:4px 24px 4px 14px; border:1px solid #464e5b; margin-top:1px;}
.content-item .back-link span {padding-right:14px;}
.content-item .back-link:hover {background-color:#464e5b; color:#fff;}

/* not data */
.not-data {display:table; width:100%; height:200px;}
.not-data p {display:table-cell; vertical-align: middle;}
@media only screen and (max-width:450px) {
    .not-data p {text-align: center;}
}

/* search bar */
.table-wrap {position:relative; width:100%;}
.table-wrap .search-bar {position:relative; width:100%; padding:32px 0; background-color:#f9f9f9; border:1px solid #e5e5e5; border-top:2px solid #171c61; display:table; margin-bottom:50px;}
.table-wrap .search-bar .search-box {position:relative;  display:table-cell; vertical-align:middle; height:auto; margin:0 auto; text-align:center;}
.table-wrap .search-bar .search-box input {width:400px; height:48px; border:2px solid #282828; box-sizing:inherit; text-align:left; text-indent:4px;}
.table-wrap .search-bar .search-box button {margin-top:1px; width:60px; height:48px; background-color:#464e5b; color:#fff; vertical-align: top; box-sizing:inherit; border:2px solid #3d4450; }
.table-wrap .search-bar .search-box button span {font-size:3rem; line-height:48px;}

.table-wrap .basic-search-bar {position:relative; width:100%; padding:24px 0; background-color:#fafafa; border:1px solid #e5e5e5; display:table; margin-bottom:50px;}
.table-wrap .basic-search-bar .search-box {position:relative;  display:table-cell; vertical-align:middle; height:auto; margin:0 auto; text-align:center;}
.table-wrap .basic-search-bar .search-box select {padding-left:10px; width:120px; height:38px; line-height:38px; background-color:#fff; vertical-align:text-top; border:1px solid #a4a4a4;}
.table-wrap .basic-search-bar .search-box input {width:280px; height:38px; border:1px solid #a4a4a4; box-sizing:inherit; text-align:left; text-indent:4px; vertical-align:top;}
.table-wrap .basic-search-bar .search-box button {width:auto; height:38px; padding-left:16px; padding-right:16px; background-color:#595a5e; color:#fff; vertical-align:text-top; box-sizing:inherit; border:1px solid #595a5e; font-weight:400;}
.table-wrap .basic-search-bar .search-box button span {font-size:2.4rem; line-height:38px;}

@media only screen and (max-width:600px) {
    .table-wrap .search-bar {margin-bottom:30px;}
    .table-wrap .search-bar .search-box input {width:70%;}
    .table-wrap .search-bar .search-box button {width:54px;}

    .table-wrap .basic-search-bar .search-box select, .table-wrap .basic-search-bar .search-box input, .table-wrap .basic-search-bar .search-box button {width:90%; margin-bottom:4px;}
    .table-wrap .basic-search-bar .search-box button {margin-bottom:0;}
}

@media only screen and (max-width:450px) {
    .table-wrap .search-bar .search-box input {width:68%;}
    .table-wrap .search-bar .search-box button {width:48px;}
}

/* nav */
.table-wrap .basic-header {position:relative; width:100%;}
.basic-header .total {float:left;}
.basic-header .total p, .basic-header .search-txt p {display:inline-block; letter-spacing: 0;}
.basic-header .total p span, .basic-header .search-txt p span {font-weight:600; color:#222;}
.basic-header .total p span.fw300 {font-weight:300;}


.basic-bnav ul {text-align:center;}
.basic-bnav ul li {display:inline-block; cursor:pointer; margin-right:4px; padding:8px 15px; border:1px solid #e1e1e1;}
.basic-bnav ul li a {display:block; text-decoration:none; padding:8px 15px; color:#565656;}
.basic-bnav ul li.disabled {color:#c4c4c4; background-color:#f0f0f0; cursor:default;}
.basic-bnav ul li.active {background-color:#285943; border: 1px solid #244f3c; color:#fff; cursor:default;}

.basic-bnav ul li.active, .basic-bnav ul li:not(.disabled):hover {background:#335a84; border:1px solid #335a84; color:#fff;}
.basic-bnav ul li:not(.disabled):hover a {color:#fff;}

@media screen and (max-width: 600px) {
    .basic-header .total, .basic-header .search-txt {width:100%;}
    .basic-bnav ul li.pc-view {display:none;}
}

/* plist board design */
.basic-plist {position:relative; width:100%; margin:10px 0 40px 0; overflow:hidden;}
.basic-plist ul li {position:relative; width:100%; margin-bottom:60px;}
.basic-plist ul li:last-child {margin-bottom:0;}
.basic-plist .plist-item {position:relative; width:100%;}
.basic-plist .plist-item .head-info-wrap, .basic-plist .plist-item .list-info-wrap {position:relative; width:100%; display:flex;}
.basic-plist .plist-item .head-info-wrap .head-left {float:left; width:56%; text-align:center; border-left:1px solid #cdcdcd; border-top:1px solid #cdcdcd;}
.basic-plist .plist-item .head-info-wrap .head-left img {width:auto; max-width:80%;}
.basic-plist .plist-item .head-info-wrap .head-left2 {float:left; width:56%; text-align:center; border-left:1px solid #cdcdcd; border-top:1px solid #cdcdcd;}
.basic-plist .plist-item .head-info-wrap .head-left2 img {width:auto; max-width:40%;}
.basic-plist .plist-item .head-info-wrap .head-right {float:left; width:44%; text-align:center;}
.basic-plist .plist-item .head-info-wrap .head-right dl {display:flex; position:relative; width:100%;}
.basic-plist .plist-item .head-info-wrap .head-right dl dt, .basic-plist .plist-item .head-info-wrap .head-right dl dd {float:left; display:inline-block; padding:16px 0; text-align:center; text-align:left; border-left:1px solid #cdcdcd; border-bottom:1px solid #cdcdcd;}
.basic-plist .plist-item .head-info-wrap .head-right dl:before,
.basic-plist .plist-item .head-info-wrap .head-right dl:after {content:""; display:block; clear:both;}
.basic-plist .plist-item .head-info-wrap .head-right dl:first-child dt, .basic-plist .plist-item .head-info-wrap .head-right dl:first-child dd {border-top:1px solid #cdcdcd;}

.basic-plist .plist-item .head-info-wrap .head-right dl dt {width:40%; background-color:#f0f2f7;}
.basic-plist .plist-item .head-info-wrap .head-right dl dd {width:60%; border-right:1px solid #cdcdcd;}
.basic-plist .plist-item .head-info-wrap .head-right dl dt label, .basic-plist .plist-item .head-info-wrap .head-right dl dd label {position:relative; display:block; width:100%; line-height:1.3; padding:0 20px 6px 20px;}
.basic-plist .plist-item .head-info-wrap .head-right dl dt label b, .basic-plist .plist-item .head-info-wrap .head-right dl dd label b {font-weight:400;}
.basic-plist .plist-item .head-info-wrap .head-right dl dt label:last-child, .basic-plist .plist-item .head-info-wrap .head-right dl dd label:last-child {padding:0 20px 0 20px;}
.basic-plist .plist-item .head-info-wrap .head-right .btn-normal {padding:16px 50px; width:100%; color:#fff; background-color:#464e5b; border:1px solid #464e5b; display:inline-block; margin:0 auto;}
.basic-plist .plist-item .list-info-wrap table {width:100%; position:relative;}
.list-info-wrap table {overflow:hidden; height:auto !important; table-layout:fixed;}
.list-info-wrap table th {background-color:#FAFAFA; border-top:1px solid #cdcdcd; }
.list-info-wrap table th, .list-info-wrap table td {padding:10px 0; vertical-align:middle; border-right:1px solid #cdcdcd; border-bottom:1px solid #cdcdcd;}
.list-info-wrap table th:first-child, .list-info-wrap table td:first-child {border-left:1px solid #cdcdcd;}

.list-info-wrap table tr {}
.list-info-wrap table td {min-height: max-content;}
.list-info-wrap table td:before,
.list-info-wrap table td:after {content:""; display:block; clear:both;}
.list-info-wrap table .p-c1 {width:14%;}
.list-info-wrap table .p-c2 {width:35%;}
.list-info-wrap table .p-c3 {width:25%;}
.list-info-wrap table .p-c4 {width:14%;}
.list-info-wrap table .p-c5 {width:6%;}
.list-info-wrap table .p-c6 {width:6%;}

/* 테이블 스타일 */
.board-table {
	width: 100%;
	border-spacing: 0; /* 셀 사이의 공간 제거 */
	border-collapse: collapse;
	margin-top: 20px;
	table-layout: auto; /* 자동 크기 조정, 그러나 width 설정으로 열 크기 일정하게 유지 */
}
.board-th, .board-td {
	padding: 12px 15px;
	border: 1px solid #ddd;
	text-align: center;
	word-wrap: break-word; /* 긴 텍스트가 셀 안에서 잘리도록 처리 */
}
.board-th {
	background-color: #f4f4f4;
	font-weight: bold;
	text-align: center;  /* 헤더 글씨 가운데 정렬 */
}

/* 순번, 제목, 날짜 열의 너비를 설정 */
.board-th:nth-child(1), .board-td:nth-child(1) {
	width: 4%; /* 품번 열 */
}
.board-th:nth-child(2), .board-td:nth-child(2) {
	width: 15%; /* 물품식별번호 열 */
}
.board-th:nth-child(3), .board-td:nth-child(3) {
	width: 11%; /* 모델명 열 */
}
.board-th:nth-child(4), .board-td:nth-child(4) {
	width: 18%; /* 형태 열 */
}
.board-th:nth-child(5), .board-td:nth-child(5) {
	width: 18%; /* 단위 열 */
}
.board-th:nth-child(6), .board-td:nth-child(6) {
	width: 5%; /* 수량 열 */
}
.board-th:nth-child(7), .board-td:nth-child(7) {
	width: 5%; /* 금액 열 */
}
.board-th:nth-child(8), .board-td:nth-child(8) {
	width: 13%; /* 금액 열 */
}
.board-th:nth-child(9), .board-td:nth-child(9) {
	width: 11%; /* 금액 열 */
}
.board-tr:nth-child(even) {
	background-color: #f9f9f9;
}
.board-tr:hover {
	background-color: #f1f1f1;
}
.board-td {
	background-color: #fff; /* 내용 입력 부분에 흰색 배경 */
}
.board-td a {
	text-decoration: none;
	color: #000;
}
.board-td a:hover {
	color: #007bff;
}


/* 추가된 부분: 순번과 날짜를 가운데 정렬 */
.board-td:first-child, .board-td:last-child {
	text-align: center;
}

/* 페이지네이션 스타일 */
.pagination {
	text-align: center;
	margin-top: 20px;
}
.pagination-button {
	padding: 8px 16px;
	margin: 0 5px;
	cursor: pointer;
	border: 1px solid #ddd;
	background-color: #f4f4f4;
	font-size: 16px;
}
.pagination-button.active {
	background-color: #007bff;
	color: white;
}
.pagination-button:hover {
	background-color: #e0e0e0;
}
.pagination-button:focus {
	outline: none;
}


@media only screen and (max-width:1100px) {
    .basic-plist .plist-item .head-info-wrap .head-left, .basic-plist .plist-item .head-info-wrap .head-right {width:50%;}
	.basic-plist .plist-item .head-info-wrap .head-left img {width:60%;}
}

@media only screen and (max-width:768px) {
.basic-plist .plist-item .head-info-wrap .head-left {border-right:1px solid #cdcdcd;}
	.basic-plist .plist-item .head-info-wrap .head-left img {width:50%;}
	.basic-plist .plist-item .head-info-wrap .head-right dl dt, .basic-plist .plist-item .head-info-wrap .head-right dl dd {text-indent:0; text-align:center; padding:10px 0;}
	.basic-plist .plist-item .head-info-wrap .head-left, .basic-plist .plist-item .head-info-wrap .head-right {width:100%;}
	.basic-plist .plist-item .head-info-wrap .head-right .btn-normal {padding:12px 0;}

	.basic-plist .plist-item .head-info-wrap {display:block;}
	.basic-plist .plist-item .list-info-wrap{display:none;}
}

@media only screen and (max-width:450px) {
	.v-center-container {padding:30px 0;}
	.basic-plist .plist-item .head-info-wrap .head-right dl dt {width:36%;}
	.basic-plist .plist-item .head-info-wrap .head-right dl dd {width:64%;}
	.basic-plist .plist-item .head-info-wrap .head-right dl dt label, .basic-plist .plist-item .head-info-wrap .head-right dl dd label {padding:0 10px 6px 10px;}
	.basic-plist .plist-item .head-info-wrap .head-right dl dt label:last-child, .basic-plist .plist-item .head-info-wrap .head-right dl dd label:last-child {padding:0 10px 0 10px;}
	.basic-plist .plist-item .head-info-wrap .head-left img {width:80%;}
	.basic-plist .plist-item .head-info-wrap .head-right dl dt, .basic-plist .plist-item .head-info-wrap .head-right dl dd {text-align:left;}
}

.info-bottom-line {border-bottom:1px solid #cdcdcd;}
@media only screen and (max-width:768px) {
	.info-bottom-line {border-bottom:0px;}
}