main > .container { width:100%; max-width:1280px; place-self:center; margin-bottom:100px; }

.section-title { margin-top:100px; display:flex; flex-direction:column; align-items:center; }
.section-title h2 { font-size:30px; }
.section-title p { font-size:16px; }

form { margin-top:40px; display:grid; gap:10px; width:100%; max-width:350px; place-self:center; }

form .field { height:40px; }
form .field input { width:100%; height:100%; border: 1px solid #ccc; }
form .jw-button { width:100%; height:40px; --btn-bgcolor:#222; --btn-font-color:#fff; }

.jw-tableA { margin-top:40px; max-width:800px; place-self:center; }
.jw-tableA td, .jw-tableA th { height:40px; }
.jw-tableA .name { width:100px; text-align:center; }
.jw-tableA .status { width:100px; text-align:center; }
.jw-tableA .created_at { width:100px; text-align:center; }
.jw-tableA .reserve_date { width:100px; text-align:center; }

@media screen  and  (max-width : 1280px) {
	main > .container { padding:20px; }
}

@media screen and (max-width: 768px) {

	.jw-tableA, .jw-tableA thead, .jw-tableA tbody, .jw-tableA th, .jw-tableA td, .jw-tableA tr {
		display: block;
		width: 100%;
	}
  .jw-tableA tr:first-child {
    display: none;
  }
	.jw-tableA thead {
		display: none;
	}

	.jw-tableA tr {
		margin-bottom: 1rem;
		border: 1px solid #ddd;
		padding: 0.5rem;
		background: #fff;
	}

	.jw-tableA td { display:flex; align-items:center; }
	.jw-tableA td::before {
		position:relative;
		width: 80px;
		height:100%;
		white-space: nowrap;
		font-weight: bold;
		color: #666;
		display:flex; justify-content:center; align-items:center;
	}

	.jw-tableA .name { width:100%; }
	.jw-tableA .status { width:100%; }
	.jw-tableA .created_at { width:100%; }
	.jw-tableA .reserve_date { width:100%; }
	
	.jw-tableA td.name::before        { content: "신청자명"; }
	.jw-tableA td.title::before       { content: "상품명"; }
	.jw-tableA td.status::before      { content: "상태"; }
	.jw-tableA td.created_at::before  { content: "예약일"; }
	.jw-tableA td.reserve_date::before { content: "신청일"; }
}