@charset "utf-8";

.permit-wrap {padding:3.3em 20em 3em 4.117em; position:relative; background-image:url(../img/sub/permit_bg1.png), url(../img/sub/permit_bg2.png); background-repeat:no-repeat; background-position:0 2.352em, 100% 4.705em;}
.permit-wrap:after {content:''; position:absolute; top:0; right:0; bottom:0; left:0; border-radius:2.352em 5.882em 2.352em 2.352em; z-index:-1;}
.permit-wrap.howTo:after {background:linear-gradient(to top left, #CCF0E4, #F1FFE3);}
.permit-wrap.applicant:after {background:linear-gradient(to top left, #F8F7EE, #FFF1A9);}
.permit-wrap.howTo:before {content:''; width:11.882em; height:14.705em; background:url(../img/sub/permit_obj1.png) no-repeat 100% 100%; background-size:contain; position:absolute; right:4.117em; bottom:-1.764em;}
.permit-wrap.applicant:before {content:''; width:12.941em; height:12.352em; background:url(../img/sub/permit_obj2.png) no-repeat 100% 100%; background-size:contain; position:absolute; right:4.117em; bottom:0;}
.permit-wrap dl dt {margin-bottom:.5em; font-family:'TTWanjudaedunsancheB',Helvetica,Arial,sans-serif; font-size:2.352em; color:#539A68;}
.permit-wrap dl dd {word-break:keep-all;}

.applicant-form {position:relative; max-width:30em; padding-right:7.058em;}
.applicant-form ul li {position:relative; padding-left:4.705em;}
.applicant-form ul li + li {margin-top:.588em;}
.applicant-form ul li label {font-size:1.176em; font-weight:600; line-height:2.5; position:absolute; top:0; left:0;}
.applicant-form .btn-applicant {width:5.882em; color:#fff; font-weight:600; background:#539A68; border:0; border-radius:.882em; position:absolute; top:0; right:0; bottom:0;}
.applicant-form .btn-applicant:hover {background:#3f8353;}

@media (max-width:1024px) and (min-width:769px) {
	.permit-wrap.applicant {padding-right:11em;}
	.permit-wrap.applicant:before {right:2.5em;}
	
	.wst-search-btn {height:3.212em !important;}
}
@media (max-width:768px) {
	.permit-wrap {padding:3em 11em 2.8em 2.5em;}
	.permit-wrap:after {border-radius:2em 5em 2em 2em;}
	.permit-wrap.howTo:before {width:8em; right:2em; bottom:-1.2em;}
	.permit-wrap dl dt {font-size:2em;}
	
	.applicant-form {max-width:none; min-width:24em; padding-right:0;}
	.applicant-form .btn-applicant {position:static; width:100%; padding:.9em; margin-top:1em;}
	.permit-wrap.applicant:before {width:9.5em; right:1.2em;}
}
@media (max-width:480px) {
	.permit-wrap {padding:2.8em 2.2em 2.5em;}
	.permit-wrap:before {display:none;}
	.permit-wrap dl dt {font-size:1.8em;}
	
	.applicant-form {min-width:auto;}
	.applicant-form ul li {padding-left:0;}
	.applicant-form ul li label {display:block; margin-bottom:.3em; font-size:.95em; line-height:1.2; position:static;}
}

/* 폐기물 신청 Start */
/* 공통 */
.wst-list-area { border:0 !important; padding:0 !important; }

/* 카테고리 탭 */
.wst-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.wst-tab { min-width:84px; padding:10px 14px; border:1px solid #c8c8c8; background:#fff; color:#333; border-radius:4px; cursor:pointer; font-size:14px; }
.wst-tab:hover { background:#f4f6fb; }
.wst-tab.on { border-color:#158E39; color:#158E39; font-weight:600; }

/* 체크박스 */
.wst-list-area input[type="checkbox"] { position:fixed; }
.wst-item-table input[type="checkbox"] + label:before { top: unset; }

/* 검색바 */
.wst-search { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.wst-search-type {  min-width:90px; }
#wstSearchType, #wstSearchKeyword { font-size: 14px !important; }
.wst-search-input { flex:1; height:36px; border:1px solid #c8c8c8; padding:0 10px; }
.wst-search-btn { height:2.785em; padding:0 18px; background:#539A68; color:#fff; border:0; border-radius:4px; cursor:pointer; font-size:14px; -webkit-transition: 0.3s; transition: 0.3s;}
.wst-search-btn:hover { background:#3f8353; }

/* 품목 선택 테이블 */
.wst-table-wrap { border:1px solid #d0d4dc; max-height:320px; overflow-y:auto; }
.wst-item-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.wst-item-table thead th { position:sticky; top:0; background:#fff; border-bottom:1px solid #d0d4dc; padding:12px 8px; font-weight:600; font-size:14px; color:#222; text-align:center; z-index: 10;}
.wst-item-table tbody td { padding:10px 8px; border-bottom:1px solid #eceef2; font-size:14px; color:#3b6bd6; text-align:center; }
.wst-item-table tbody tr:last-child td { border-bottom:0; }
.wst-item-table tbody td.taR { text-align:right; padding-right:18px; color:#222; }
.wst-item-table tbody td:first-child { color:#222; }

/* 배출 품목 카드 */
.wst-selected-list { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.wst-empty-msg { color:#999; font-size:18px; text-align:center; padding:20px 0; }
.wst-card { border:1px solid #d8dce6; border-radius:6px; padding:14px 16px; background:#fff; }
.wst-card-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.wst-card-tag { display:inline-block; border:1px solid #b0b8ce; border-radius:20px; padding:4px 14px; font-size:13px; color:#444; white-space:nowrap; }
.wst-card-nm { font-size:16px; color:#222; min-width:70px; }
.wst-card-spcfct { font-size:16px; color:#222; min-width:100px; }
.wst-card-unit { font-size:16px; color:#e03030; min-width:80px; }
.wst-card-qty { display:flex; align-items:center; gap:6px; }
.wst-qty-btn { width:28px; height:28px; border:1px solid #ccc; background:#fff; border-radius:4px; cursor:pointer; font-size:16px; line-height:1; }
.wst-qty-val { width:36px; text-align:center; height: 32px !important; }
.wst-card-total { font-size:15px; font-weight:600; color:#222; min-width:90px; text-align:right; }
.wst-card-similar-wrap { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.wst-similar-input-row { font-size: 16px !important; margin-top:8px; display:flex; align-items:center; }
.wst-similar-label { color:#fff; width: 4.705882em; line-height: 2.785em; background: #4D545B; text-align: center; border-radius: 5px 0 0 5px; }
.wst-similar-input { flex:1; height:34px; border:1px solid #c8c8c8; padding:0 10px; border-radius:4px; }

/* 총 수수료 */
.wst-total-row { text-align:right; font-size:16px; color:#222; padding-top:8px; border-top:1px solid #e0e0e0; }
.wst-total-row span { font-size:18px; font-weight:700; color:#e03030; margin-left:8px; }

.wst-card .fl1 { flex:1; }
/* 신청 버튼*/
.green-btn, .file-upload-area .grid.drag_and_drop .no_data .tit {color:#fff !important; background:#539A68 !important; border:0; border-radius:4px; -webkit-transition: 0.3s; transition: 0.3s; background-repeat:no-repeat; }
.green-btn:hover, .file-upload-area .grid.drag_and_drop .no_data .tit:hover {background:#3f8353 !important; }

.cancel-line {text-decoration:line-through; }
.total-fee {padding: 15px; background: #f5f5f5; border-top: 1px dashed #cccccc; border-bottom: 1px dashed #cccccc;}
/* 모바일 반응형 - 구분 컬럼 숨김 */
@media (max-width: 640px) {
	.wst-item-table colgroup col:nth-child(2),
	.wst-item-table thead th:nth-child(2),
	.wst-item-table tbody td:nth-child(2) { display: none; }
	.wst-empty-msg {font-size:16px; }
	.wst-card-nm, .wst-card-spcfct, .wst-card-unit, .wst-similar-input-row { font-size: 14px !important; }
	.pay-info td { text-align: center !important;}
	.dscd-ymd-info { display: block !important; font-size: 14px;}
}
/* 폐기물 신청 End */

.addr { padding-left: 1.4em; position: relative; }
.addr:before { content: ''; width: 1.111em; height: 1.111em; background: url(../img/sub/icon_addr.svg) no-repeat 50% 50%; background-size: contain; position: absolute; top: .16em; left: 0; }
.btn.icon.phrecycle { padding: .475em .8em; padding-left: 2.4em !important; background-position: top 50% left .7142857em !important; border-radius: 0.2em; background-size: 1.242857em auto !important; border: 1px solid #539A68; color: #539A68 !important; background-color: #fff !important; -webkit-transition: 0.3s; transition: 0.3s;}
.btn.icon.phrecycle:hover {  background-color: #539A68 !important; color: #fff !important; }
.btn.icon.map { background-image: url(../img/sub/map.svg);}
.btn.icon.map:hover { background-image: url(../img/sub/white/map.svg) !important; text-decoration: underline !important; }
.btn.icon.card { background-image: url(../img/sub/card.svg); }
.btn.icon.card:hover { background-image: url(../img/sub/white/card.svg) !important; }
.btn.icon.receipt { background-image: url(../img/sub/receipt.svg); }
.btn.icon.receipt:hover { background-image: url(../img/sub/white/receipt.svg) !important; }
.btn.icon.print { background-image: url(../img/sub/print.svg); }
.btn.icon.print:hover { background-image: url(../img/sub/white/print.svg) !important; }